Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Reusing Classes

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

I don't understand why he's using ID's and classes in these specific elements?

Ok so Guil is using classes and ID's in particular areas which is confusing me.

1.) Why are we using a class for something which is unique, i.e. the header? It's strange because he has named it "main-header" as well. Which clearly sounds like a name given to an ID. Classes and ID's feel all a little over the place at the moment. Can someone explain if I am viewing this wrong?

Thanks, James.

5 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I do not recall if I heard this in a class or if this is my thoughts on classes and ids. It is probably both.

I prefer to use classes by default. It gives me the flexibility to use the same code multiple times on the same page if I wish. It also allows me to apply an ID later if I wish. If I code with many ids at the beginning and want to make a change, I have to change the HTML and the CSS. I cannot reuse the code on the same page if I want.

I use ids as anchor points in my document and for very specific, unique styling. Otherwise I use classes.

The most important thing you can do is decide what works best for you and use it consistently.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I agree with Ted and to add my personal thoughts, classes are also my default, for a few reasons

  • I can stack multiple classes on an element for a more modular approach, ID's are limited to one per element
  • I have more flexibility down the road
  • Classes naturally have less weight in the cascading part of CSS, which leads to fewer headaches and frustrations when you're trying to figure out why an ID is overriding a class when it seems like it shouldn't

I also use IDs only as hooks, whether it be JS or very specific CSS.

anthony scalise
anthony scalise
2,050 Points

So if we have two different colors for the header and footer. Lets say red for the header and orange for the footer, we would put an id to style the header red rather than class since its more specific?

Actually now that I look for it for the header and footer he has a id for the footer and a class for the header. Im guessing the footer gets an ID because it has specific padding properties?

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

If you want to see an example of my css, look here beginning on line 400. The site is for my son's Cub Scout Pack. The first 400 lines are normalize.css.

I try to style off of the html tag if I can. Then I use classes. Finally, I use an id. In the file I cited above, I used one ID, and that was for special formatting of text colors to they would be more visible. All the other IDs were provided by other people for a JavaScript file or normalize. I write styles on elements for consistency through the site. Classes override the element styling. IDs are reserved for very special circumstances.

I think you are trying to read too much into the difference between a class and ID. What you really want to do is to find what works for you. I prefer to be general so I can be specific later if I need to be. If I start too specific, I have major rewriting if I change the code, unnecessarily repeat code for multiple ids, and find it hard to stay organized.

Jane Volin
Jane Volin
4,193 Points
Jane Volin
Jane Volin
4,193 Points

Thanks that makes sense. Can you give a code example of a very specific scenario when you would use an id?

Jane Volin
Jane Volin
4,193 Points
Jane Volin
Jane Volin
4,193 Points

It seams to me that main-header, primary-content and secondary-content should be ids rather than classes since there will only be one of these specific elements on the page. It makes sense to have "t-border" as a class so that it can be applied to multiple elements.

For example:

  1. You set the background color of the class main-header to blue
  2. You also want the footer to be blue

Q. Would you assign the footer the class "main-header"? A. No, because "main-header" is a different section of the page and is not descriptive of the footer or the blue background color.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

The challenge is what benefit does an id provide over a class, it still leaves you at a disadvantage. I love talking about this. And the challenge with ID's as css selectors is they hold more specificity than a class. This can be incredibly frustrating, and by using IDs as selectors, even for main sections, you are much more likely to paint yourself into a css corner.

I agree, no doubt it's highly unlikely you would only ever have one main-header element. But let's look at this example I made: http://codepen.io/kevink/pen/WxrEZJ

I have two identical divs, only one has an id of main, and than a class of main-modifier, to modify. Because I can't use more than one ID, I have to use a class, but as you can see, on the element with the main id, my main-modifier class won't override the styles set in the #main id selector, even though it's a rule later in the css document, it's not enough. This concept can be extended, what if you wanted to collapse an element. If you had #main-body set to display: block, and than you wanted to add a class .is-collapsed and set that class to display: none, it won't work. Or maybe you want to to have a slightly different main-header for single pages. In classes, you could have a main-header class, with an is-single modifier, which would work. If it's an id, you have to write a new css rule, and it's much less modular.

Small sites you're much less likely to run into this problem, but I feel strongly its important to practice best practices on even the smallest of projects to develop good habits, and using classes for css selectors, regardless of whether an id would work, is considered a best practice.

Reserve the use of id's to when you have or need very specific use scenarios. Javascript selectors, or other odd scenarios where you want to override any and all css rules would be acceptable.

Hope that makes sense and my reasoning is clear.