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 Layout Basics Page Layout with the Float Property Creating a Horizontal Navigation with Floats

Ryan Maneo
Ryan Maneo
4,342 Points

Why so many classes?

It seems like in all of his tutorials he's using classes rather than ids, now, if you plan to use the class later it makes sense, but for a lot of projects its a one-time use, which doesn't seem right.

Parsenz Dev
Parsenz Dev
13,198 Points

I think this might be to get you in the mindset of using the "class" approach. That's the preferred way...because...it just is lol. Take a look at this

Ryan Maneo
Ryan Maneo
4,342 Points

I appreciate the flexibility of classes, Parsenz Dev, I just don't see the need to only use that. I guess if its proper practice to do so I'll get used to it though.

2 Answers

Kevin Korte
Kevin Korte
28,148 Points

IDs offer less flexibility, and carry more css specificity, so you're more likely to get yourself into specificity trouble later on in a project if start with IDs, which is why classes are considered best practices.

I typically refrain from using IDs unless I need a hook for some javascript.

Abraham Juliot
Abraham Juliot
47,353 Points

Actually, classes should not be used to give identity to an element if no other element should have the same identity and attributes. True, IDs provide a convenient way to select a single element with javascript, but they also eliminate the need to use more classes to select their child elements:

/* selects first of type anchors within the parent #myId */
#myId a:nth-of-type(1) { } 

/* selects first of type anchors, but not within #myId */
a:nth-of-type(1)  { } 

/* required to override previously declared styles within #myId */
#myId a:nth-of-type(1)  { }