Hashed classes in CSS
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:
<ul class="nav #site-nav">
Which, of course, would replace:
<ul class="nav" id="site-nav">
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 is does need escaping in CSS.
You could use a naming convention like this, instead:
<ul class="nav _site-nav">
Which would be styled with:
Of course, this is all just an alias for:
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.
In this situation I would recommend something like this:
<div class="#foo" id="js-foo">
.#foois our faux-ID to be used in CSS.
#js-foois 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.