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 How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

I never use IDs, am i wrong?

I've noticed that Nick Pettit uses ids for elements that are going to be used just one time. A long time ago i heard a lot about DRY principles and performance rendering. I would like to heard a contemporary second opinion. What do you think about using IDs on CSS?

4 Answers

James Barnett
James Barnett
39,199 Points

You shouldn't be using IDs in CSS except in cases where you need to raise the specificity of an element.

You can read more about why not to use IDs in Guil Hernandez's Treehouse blog article on common CSS front end mistakes

There are some very good reasons why not to use IDs most of those reasons are covered under the headings of CSS architecture in particular SMACSS and OOCSS.

further reading

Richard Duncan
Richard Duncan
5,568 Points

Great blog article by Guil Hernandez makes a lot of sense.

Richard Duncan
Richard Duncan
5,568 Points

I use ID's for something specific, classes are reusable. I find it easier to read and maintain code by sticking to this principle. I wouild also imagine in terms of performance using ID's will be faster as there is only one unique ID allowed per page whereas there can be multiple class selectors.

I can see from your profile you are heavily design orientated. When developing and manipulating the DOM with javascript you may want to apply for example a mouseover effect to all elements with the same class, but likely there will be times where you would only want to update a specific element following an action. The easiest traditional way to do this would be to reference that element in your data model by ID, then find it with javascript and update the contents. Something along the lines of...

var e = document.getElementById('element-to-update');

e.innerHTML = "Update element-to-update only";

vs

var e = document.getElementByClassName('element-to-update');

// Gets all elements on the DOM with the same class identifier

getElementById is more widely supported (IE 5.5 vs IE 9.0 is one example) than getElementByClassName so that in itself may be another reason to use an identifier rather than class.

James Barnett
James Barnett
39,199 Points

No one ever says "don't use IDs" (as in at all). People say "don't use IDs in selectors" important distinction

Andrew McCormick
Andrew McCormick
17,730 Points

Like Richard said. I use IDs when something needs to be specific and classes for more general use. You could technically use a class only one time and thus use it like an id. But watch were you call your class in your CSS. If you have multiple classes on an element and you want one to be only for that element, you have to make sure you always call that class farther down your css or it will get overridden by the other classes. Meanwhile if you had used an ID, it can take precedence over the class.

<div id="adiv">
  <ul>
    <li class="red"> I have my own class </li>
</ul>
</div>
div#adiv ul li {
/* takes precedence */
 color: blue;
}

.red {
color: red;
}

codepen of above Coyer over on CSS Tricks says it far better than I can: http://css-tricks.com/specifics-on-css-specificity/

Of course this is probably one of the articles you are referring to and he makes some pretty good points: http://oli.jp/2011/ids/

James Barnett
James Barnett
39,199 Points

> Meanwhile if you had used an ID, it can take precedence over the class.

That's asking for a specificity war.

Andrew McCormick
Andrew McCormick
17,730 Points

until I read through these responses, I must admit I never thought of a specificity war as a bad thing as long as I'm in control of it. However I can greatly see the impact as I've been frustrated with batting clean up on old sites. Just thought it was a part of life. Looks like I have some catching up to do in how I manage my css.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi everyone,

I responded to a similar question in the Treehouse Fans FB group. Here's what I said there:

Keep in mind that this is a beginner course, and while that's no excuse to instill bad habits, it's still important to teach a variety of concepts. After a student builds their first website, I would expect them to know about ID attributes and how to use them, so it's important to include a few examples. Lots of websites still use ID attributes and if a student gets a job, they'll likely be working with an existing code base. Best coding practices can come when most of the important concepts have been introduced. Hopefully that makes sense.