CSS ID selectors: never say never

I've tried just about every CSS methodology I've read about. I try to give each one a good chance and take away whatever I find useful from the experience.

I've never yet settled on a single way of doing things, always feeling that I'm evolving my approach yet also finding that needs and solutions change too.

Right now I base my CSS loosely on Jonathan Snook's Scalable and Modular Achitecture for CSS. Here he mentions that there is no need to use id selectors in CSS, that they are only marginally more efficient than class selectors and "can make styling more complicated due to increasing specificity". This is good advice.

More recently I've read articles that state NEVER USE ID SELECTORS IN YOUR CSS. I don't like absolutes and to me this sounded like a challenge. So when it came to styling our NimbleWorks site I decided to use as many id selectors as possible.

I was happy to re-embrace the id selector. Whilst trying to create modular and portable CSS I've found that actually, sometimes you need a little specificity.

For example, most sites feature a main logo or title in the header. Often, you would want to place style rules for the logo under a  .logo class selector which could, in theory, be used to create multiple logos in different areas of the page. However, there are also styles that apply to the positioning of that unique logo in that precise part of the page. I would usually create the reusable .logo class whilst putting more specific styles under a different selector which qualifies the logo by its location, such as .header .logo. But it was quite satisfying to use an id selector instead, eg #header-logo.

In this instance I found few problems with the overuse of id selectors. But this was quite a simple site and I would have run into trouble given more complexity. I may yet have to go back and make some changes should we decide to move the furniture about.

The difficulty, as Jonathan Snook points out, is increased specificity which effectively shortens the cascade. Whereas this shortening can be handy in targeting styles, as in the logo example, it can also leave you little room for negotiation.

The first problem I encountered was layering styles, as one would by applying multiple classes. This becomes problematic because rules applied by the id always trump those defined by classes. So you find yourself redefining the odd rule unnecessarily.

Where descendant selectors are used, it's easy to find oneself in the situation of having to over qualify them. For example:

<ul id="animals">
<li class="even">Bear</li>
<li class="even">Dog</li>
</ul> #animals li { background: #FFF; } .even { background: #CCC; }

For whatever reason, I want to be able to change the background colour of every other item. But #animals li is so specific that I can only effectively overwrite it with another id selector.


I'm not afraid to throw the odd #id selector into my stylesheets, sometimes they're effective and appropriate. However, although I largely got away with this on the NimbleWorks site, I'll be going back to class-based stylesheets.  That is, until I find some other method to test, I'll try anything once..