Hashed classes in CSS – CSS Wizardry

28 May, 2013

Written by Harry Roberts on CSS Wizardry.

I gave a talk at Beyond Tellerrand yesterday
in which I shared some advice concerning the use of IDs in CSS, something which
I vehemently recommend you avoid.
Vitaly, who was in the audience,
tweeted a snippet of the advice
which was, unfortunately, a little out of context. I got a lot of tweets after
that asking that I explain further, so here it is…

For a long time now I have advised people not to use IDs in CSS. Use them in
your JS, sure, and as fragment identifiers in HTML, but do not use them to style
things in CSS. The reasons for this are, firstly, lack of reusability and
secondly—and more importantly—they are a specificity heavyweight. Instead of
covering the specificity problems again, you can check out the article I
previously wrote on the subject
back in 2011.

Whenever I give this advice I typically get mixed reactions; a lot of people see
how it makes sense and (already) heed the advice; others seem to loathe it. I
have honestly never heard a genuinely compelling argument for using IDs in
CSS. Not. One. The closest I have heard to a decent argument is along the
lines of:

Using an ID in my CSS allows me to see from my markup what is intended to be
unique.

I was addressing this argument
in my talk,
which is where the out-of-context tweet came in. I shall attempt to paraphrase
this chunk of my talk below…

This argument, to me, feels very weak. I can’t imagine why you’d ever want to
mark something as being unique, and even if I could I do not think that
introducing such a heavily-specific selector is worth the payoff. However… My
advice that I gave on stage was simply that if you do find value in marking
something as unique, then do this with a naming convention rather than using an
ID. The example I used was this:

Which, of course, would replace:

This is valid HTML and can be styled via CSS, like so:

The reason for using the # should be pretty obvious; it looks like an ID.
The problem with using the hash symbol is that it does need escaping in CSS.
You could use a naming convention like this, instead:

Which would be styled with:

Of course, this is all just an alias for:

.this-is-unique-site-nav{}

So my advice was basically:

If you really need/want to mark something as being unique in CSS, prepend a
class with a ‘reserved’ character to denote this instead of using an overly
specific ID.

Table of Contents

Toggle

Featured case study: NHS

How I helped the NHS rapidly build a brand new product.

Read case study…

Of course, still use IDs in your JavaScript, but where CSS is concerned they
should always be avoided. You can signal uniqueness via other means, such as a
prefix/namespace.

If you are hooking onto an element by ID in JavaScript, it can be tempting to
also style via this pre-existing hook. This is unwise, as it fails to decouple
your CSS layer and your JS layer; that is to say, deleting the one ID would
remove both your JS and CSS, and these things should have two totally
separate ‘hooks’ on which they bind.

In this situation I would recommend something like this:

• .#foo is our faux-ID to be used in CSS.
• #js-foo is our JS-specific ID that we attach behaviour to.

---

It’s probably worth noting that I don’t actually like this idea of faux-IDs,
but if you do need to flag something as being unique in CSS, I do find it
better than using actual IDs themselves.

• Does it make something appear to be unique? Yes.
• Does it have a nice, low specificity? Yes.
• Is this a good idea? No. But that’s because I don’t think that marking
  something as unique is necessary, which renders this idea totally pointless.

tl;dr If you need a selector to appear to be unique (though I can’t imagine
why you would want this) then present that uniqueness through a naming
convention and not an overly-specific ID.

Hopefully that clears up some of the confusion.

---

---

---

By Harry Roberts

Harry Roberts is an independent
consultant web performance engineer. He helps
companies of all shapes and sizes find and fix site speed issues.

---

Get started…

---

Hi there, I’m Harry Roberts. I am an award-winning
Consultant Web Performance Engineer, designer, developer,
writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and
improving site-speed. You should hire me.

---

Connect

---

Projects

Next Appearance