Robert Maple

Using IDs instead of !important

Specificity in CSS can be a pain, at least it can if it not managed properly. Because of this it’s fairly common practice to minimise specificity in stylesheets in an effort to keep things more manageable. Not using overly specific selectors, limiting nested selectors and not using IDs are all common rules of thumb that help this.

In an ideal world this would mean that you never have issues with specificity, however projects are often less than ideal and so it’s not uncommon to see !important used even in relatively ordered stylesheets. Whilst some of these instances may well be a bit hacky quick fixes that should probably involve a slightly more thought out solution, there’s arguably non-hacky situations where !important is often used too — utility classes for example — where !important is used to simply ensure a style outweighs anything else regardless of where the class is applied.

Recently however I’ve found myself actually turning back to the seemingly unwieldy high specificity of IDs and leveraging it as a more desirable and useful means of ensuring a classes properties persist over another’s.

As mentioned before, the fact that I, like a lot of people, generally avoid using IDs anywhere in stylesheet means that if you were to put one back in, it’s guaranteed to overrule any other competing styles due to the way a single ID outweighs any number of nested or chained classes in a competing selector. What I’ve been doing specifically though is adding an ID to the <body> tag and the there alone.

What this means is that everything in the page is a child of that ID and as such, if any CSS selector is prefaced with that ID, it’s still guaranteed to match wherever it had before. The difference being however that it now has a vastly increased specificity.

Take the example above of a utility class where ordinarily you would use !important to ensure a property value outweighs against the same property in other classes — typically this would be written like this:

Using an ID instead it could be written something like this:

Rather than using the ID of ‘body‘, it could be more relevant to use the ID of ‘final‘:

For me there could be a couple of advantages of writing a class like this using an ID rather than an !important

Firstly, and this is perhaps not a real advantage as such, but it just feels less ‘hacky’ than when using !important. Secondly, by introducing this tightly regulated higher level of specificity, I actually think it could help make a stylesheet more maintainable — compared to using !important, this adheres to the normal order of CSS much better and by limiting it to a single ID, it’s much easier to keep a grasp of. Theres also an advantage in  the the way this is written in the stylesheet as rather than adding !important to each property/value, you can simply prepend the selector with #final ( or whatever ID your using ). In a preprocessor this could even extend to wrapping groups of classes with an ID so that everything within now has this elevated specificity. As an example: 

This could also work for other components such as buttons, where you want them to look the same regardless of where their used in the markup but using !important is a bit excessive.

Of course reintroducing an IDs back in to your stylesheet is not necessarily problem free — even if its just one. The main issue I can see is simply it’s potential for overuse. I think though if used sparingly, in exactly the same way you would !important, then theres no reason for it to add extra complication and the fact that it’s a single ID on the <body> removes the confusion associated with markup littered with different ID.

If you do try adding an ID to the <body>, the last question really is what to call it. From an markup point of view, the ID of ‘body’ or ‘page’ is probably the most semantic although from the point of view of it’s use in the stylesheet as a trump card, something like ‘final’ probably makes more sense.