James Barrett13,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?
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 Korte28,102 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.
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 Volin4,193 Points
Thanks that makes sense. Can you give a code example of a very specific scenario when you would use an id?
Jane Volin4,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.
- You set the background color of the class main-header to blue
- 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.