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

Posted by Greg Shilling
Greg Shilling
3,723 Points

CSS selectors and naming conventions

Hi, I'm currently going through the CSS course and I was wondering about conventions. I did a Google search, but I wasn't entirely sure which source to believe, as I know W3Schools in particular isn't very well-respected and there may be others.

Particularly, I was wondering about conventions concerning how specific to make a selector (eg just select #id since it's unique or select div#id or ul#id instead because maybe it's more resource-efficient?).

Secondly, should I be using camelcase or underscores? Apologies if these things are addressed in later or previous videos..

Greg Shilling
Greg Shilling
3,723 Points

Thanks for your answers guys!

4 Answers

James Barnett
James Barnett
39,199 Points
  • A selector should be as specific as needed and no more.
  • There's no need to combine a type selector and a id, as an id it's supposed to be unique reference on the page.

Here's some good background on specificity and here's a great discussion on the issues with using ids in your CSS

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Usually you want to use classes(.) instead of ID's(#). There are several articles out there about this but the general idea is we should use classes only to avoid specificity issues. Previous Discussion.

As for naming conventions there really isn't a rule about this but there is an unofficial standard that most people have agreed to follow. First is class names should be named after what it is targeting or even what it does. We also want to be able to use this style repeatedly. It should always be kept lower case and if you have two words in the class it should have a (-) to separate them. James Barnett has some great links that will help to clarify things more at this post.

Hope this helps!

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

For your first question stick to DRY(Don't Repeat Yourself). Try to be just specific to get the job done, don't use any unnecessary code otherwise it just becomes more confusing for you and other people.

Second one, All of that stuff is just personal preference. Use as many of them you want whenever you want. Just make sure that you name are meaningful and understandable.

Hope that answers your questions.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

I use all lowercase and hyphenate words. I reserve underscores for PHP work. It can get confusing having everything underscored. camelCase I reserve for function names and the such like.

With CSS, be as least specific as possible otherwise, you'll end up writing a tonne of code. Such as, rather then select each paragraph elements #id, just use the p selector to change all paragraph text to blue or something.

I also don't use ids unless I'm using jQuery, again, too specific and classes can be unique, just apply a single class to that element. It may seem daft but, # also is harder to type then . which means I save time smashing out a load of .s instead of #s all the time.