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

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Posted by Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Using Classes vs. Element1 Element2 { }

Hey guys,

First post on the new forum! Hooray!

I know the best way to study is to learn from your own mistakes, but still, I thought I'd gain from your experience :)

What is your preferred method of selecting elements via CSS?

Using Classes, or selecting elements using their containing elements.

Should I look to minimize the number of hooks (Classes)?

Thanks!

5 Answers

Christoph Rumpel
Christoph Rumpel
6,715 Points
Christoph Rumpel
Christoph Rumpel
6,715 Points

Hi, first post too ;-)

There are a lot of discussions about class naming and the usage of IDs. A lot of people tend to use only classes. Of course it is ok to use IDs but you have to be carefully where to use them. Especially on bigger projects ist is often better not to use them.

When thinking about how to select parts of your html it is important to look ahead. People often tend to use selectors like #header h2 oder #header ul. Yeah this works, but as your projects grows you will probably find yourself struggling as new h2s oder uls will come to your header container. In this case i would recommend to use classes like .main-nav oder .slogan.

Another tipp is not try not to remove attributes on new css rules. If you write good css you are able only to add attributes. For example try to sum up what all your h2 will have in common. And when you need to style a h2 different use a class to enhance the h2 styles. So you can write less.

If you like to dig deeper in css best practices i can recommend these blogs:

http://css-tricks.com/

http://csswizardry.com/

I hope this helped! Cheers Christoph

Jody Albritton
PLUS
Jody Albritton
Courses Plus Student 5,497 Points
Jody Albritton
Jody Albritton
Courses Plus Student 5,497 Points

I use id's for unique elements and classes for non-unique items. I uses child selectors for items within an element. For example, I rarely give a paragraph a class, unless I want one paragraph to be styled different than the rest.

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Brilliant! That pretty much vaildates what I thougt to be true.

Thanks guys! :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

There's one other reason to use classes over IDs, specifity wars. IDs are so much more specific than the classes you end up needing to more and more specific with each element.

In terms of specificity

element = 1 class = 10 id = 100

so to make something more specific than an ID, you end up specifying lots of elements.

So the goal is to keep each of your selectors to the minimum specificity needed and this will reduce the number of specifity wars you have to fight with your code later on.

http://css-tricks.com/specifics-on-css-specificity/

Alejandro Ñáñez Ortiz
Alejandro Ñáñez Ortiz
21,184 Points
Alejandro Ñáñez Ortiz
Alejandro Ñáñez Ortiz
21,184 Points

I use .class and #id selectors as less as possible, I always try to make my website "modular" if you know what I mean. I use LESS and I create for example a "base style" called ".widget", then I create all the widgets in my site based on that base style and I customize them as I need. I'm always trying to "extend" the class ".widget".