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
James Barrett
13,253 PointsTrying to distinguish the difference between class and ID better?
Why are we using classes for the list items: .phone .mail and .twitter if they are all unique in this scenario? Or am I missing something here?
Thanks, James.
3 Answers
Luke Glazebrook
13,564 PointsHey James!
Classes are used when the styling used is going to be used on more than just one element. This way the rules for the styling can be applied to a lot of different elements without having to re-write them every time.
An ID is the opposite of this so it can only be used to style a singular element and those rules cannot be applied to any other element.
In this case you will need to examine whether you are using these styles anywhere else on the website. If you aren't, then it would be better practice to use IDs instead of classes.
I hope that this helped you out and good luck with the rest of your website!
-Luke
Kevin Korte
28,149 PointsSomething else is that an id selector will hold more "weight" in a CSS document than a class will. This can be helpful, but if not careful it can also become frustrating as you try to figure out why a style rule is not doing what you expected it to. Many websites use classes by default for styling as it has a lower css selector value, and provides more flexibility for future changes to your website.
In general, I try to use classes to style, and ids to do something, (i.e. javascript/jquery, or CSS3 animation, etc), it helps when I scan through my HTML to know where about to find out what that class or id is doing if I have them generally organized as such.
Julie Ogden
3,330 PointsJust wanted to say, this is very helpful and informative! Thank you!
Kevin Korte
28,149 PointsYou're welcome
James Barrett
13,253 PointsThanks, after viewing more tutorials on the CSS cascade and this I think I understand the concept now! :)
Iain Diamond
29,379 PointsHi James,
While each of the list items are unique it would make sense to group them in a class if, say, you wanted to format them all in the same way.
iain
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsWhile I agree with almost everything Luke said, I do not agree that it is the best practice to use IDs when either a class or ID will work. If you code everything with IDs and you need to make a future changes, you may have a significant amount of recoding in both the html and css to implement the change. Also, IDs are more specific than classes, so it alters the cascade.
Both classes and IDs have important places in the code, but I use classes most, then IDs for specificity.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsI agree with Ted here, I also use almost always classes. ID's are almost only used to do something (like in javascript) or some other very unique special purpose. And I think you'll find that's true with a lot of websites. Notice how frameworks like Bootstrap and Foundation use classes for styling.