Recently Chris Coyier and Harry Roberts opened up the conversation for CSS best practices and people are chiming in. I won’t disagree that the majority of the things Harry mentions are dead-on accurate, though whether or not I or anyone else actually follows them to the letter is debatable. But one of the personal guidelines that he points out is not to use ids in targeting CSS styles. As you might have guessed from the title, I subtly disagree.

He even says it’s a personal thing, so I won’t even say it’s wrong. Louis Lazaris backed him up on it, even getting into a disagreement with Jeffrey Zeldman of all people over the semantic nature of ids. And I won’t disagree there either.

What good is an id in HTML?

Nobody is contending that ids aren’t important for cases like JavaScript, where uniqueness is important and quickly checkable. Where the disagreement lies, essentially, is that ids make something so unique that they’re hard to cancel out in CSS. And that’s completely true.

Let’s consider this case:

<aside id="side_note">
	<p>This is some content that gets pulled toward the side. I'm sure there's more content that would go here, but since this is an example it's going to be a very short paragraph. Don't tell my High School English teacher.</p>
</aside>

In CSS I have two obvious options to style the paragraph inside the <aside>:

aside p {
	color: #333;
}

and

#side_note p {
	color: #333;
}

Here I would say that they’re about equal, since an <aside> element is likely buried in your HTML. The further into the structure you go the less likely there are to be stray styles and the need to reverse style declarations. The best choice is probably still to use aside p { }, simply because there’s one <aside> and there’s not a compelling reason to bother with an id.

Clarity

Now let’s consider this case:

<aside id="side_note">
	<p>This is some content that gets pulled toward the side. I'm sure there's more content that would go here, but since this is an example it's going to be a very short paragraph. Don't tell my High School English teacher.</p>
</aside>
<aside id="a_unique_side_note">
	<p>Here is some other unique, tangental content that should be associated with the content. It should look different than the other aside, just to be difficult.</p>
</aside>

What if in the first case we have a small paragraph that pulls to the side as a note, and the second case is a pull quote. Maybe there is other content in-between. But regardless of more context, and for argument’s sake, they should be different.

If in this situation we use the same method, aside p { }, they will look the same. We can write in classes to make them different, obviously. Maybe that would look something like this:

<aside id="side_note" class="side_note columnar">
	<p class="mini">This is some content that goes…</p>
</aside>
<aside id="a_unique_side_note" class="pull_quote emphasized">
	<p class="large_text">Here is some other unique, tangental content…</p>
</aside>

(Assume that each of those has some unique style to it and that I didn’t just write classes that would do the same things.)

That’s six classes when I could have written:

aside p {}

and

#a_unique_side_note p {}

Now, if you’re going to write things like .large_text and .pull_quote anyway, do that and reuse them. But sometimes you have a one-off thing that is really unique. For clarity, I would argue that targeting #a_unique_side_note instead of making a class .a_unique_side_note does no harm and actually signals to me as a developer that it’s unique and won’t be used elsewhere. That could be important if you only want to see that in one single place ever. If it’s low enough in the document, I see no harm in using an id here. If something will be reused, don’t make it an id.

I’d also never advocate for rewriting all of the styles in aside p {} in #a_unique_side_note p {} that’s insanity. ids should only ever exist to be unique, even when targeted in CSS.

Brevity

Sometimes you have a case where you could write a class on repeat in your CSS. Consider classes like .full_width or .width_100, or whatever else that could be mass applied at a high level. Sometimes it just makes sense to write a single declaration in CSS like this:

#branding_and_navigation,
#content,
#secondary_content,
#site_information {
	width: 100%;
}

In this situation it’s a bit of six in one, half dozen in the other. You could have a series of classes, or a few lines of CSS targeting ids. You might make the case that in a responsive situation these will go away for iPad or iPhone media queries. That might be a case in your particular pattern, and that’s fine. For my standard work these styles go all the way through with each media query and I often don’t negate them at all. So, your mileage may vary here.

Backgrounds

Sometimes you have a design where an element stands out entirely from everything else. Mastheads come to mind quickly, and so do those advertising sites with large imagery. If the correct approach is to drop a background image on a div, why not use

#my_decorative_element {
     background: url('something.jpg') no-repeat center;
}

and call it a day? It’s a singular element that won’t have a twin elsewhere. You could write a class for it, but for me, an id just feels more natural. Ids exist to stand out, to be unique. In this case there’s nothing to interfere, nothing to break, nothing to cascade.

Conclusion

I admit that for years we’ve abused ids when we should have used classes instead. But what I don’t want to see is the vilification of ids, or people scoffing at developers who choose to use them occasionally when there might be a good reason to do so.

Having a set of ideals is good, I wholeheartedly suggest we write the best HTML and CSS we can. Let’s think about efficiency and reusability, but let’s be realistic when we do that. Let’s lean on the uses for ids that do make sense, if it doesn’t go against your personal path for writing HTML. If this isn’t your process and you never touch ids, awesome! But also, as a community of professionals, I’d hate to see this build for a few years into another situation where people toss around arguments that they don’t understand simply because they heard somewhere that ids are evil. !important, or the semantic-ness of classes anyone?