Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,109 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,339 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)  { }