The good kind of specificity in CSS

What forms the specificity in CSS, what is the good kind of specificity and what bad, and how to use only the good kind of specificity.

What is specificity?

Specificity is a “weight”, upon it the browser decides which style rule is the most relevant for the given element. In other words: which style rule has the most power.

What forms the specificity in CSS?

It’s these 5 things:

1. Inline styles have higher specificity
2. Selector order
3. IDs have higher specificity than classes
4. Cascading increases specificity
5. !important rule increases specificity

Let’s look at there one by one.

1 Inline styles have higher specificity

<style>
    #my-button {
        background-color: blue;
    }
</style>

<button id="my-button" style="color: red;">Hello</button>

That button will be red.

2 Selector order

Later in the file defined rules have higher specificity.

.button {
    background-color: blue;
}

.button {
    background-color: red;
}

That button will be red.

3 IDs have higher specificity than classes

That button should be blue:

#button {
    background-color: blue;
}

.button {
    background-color: red;
}

4 Cascading increases specificity

That button will be blue:

body .button {
    background-color: blue;
}

.button {
    background-color: red;
}

The following button will also be blue:

button.button {
    background-color: blue;
}

.button {
    background-color: red;
}

5 !important rule increases specificity

.button {
    background-color: blue !important;
}

.button {
    background-color: red;
}

Blue button.

Demo

Demo for you to play around.

JS Bin on jsbin.com

The good kind of specificity

1 Inline styles have higher specificity

We want this, when you add a class to an element with JavaScript, it needs to override existing styles.

2 Selector order

We want later on in file defined rules to have the power to override earlier rules.

The bad kind of specificity

I think, there is too many ways the element’s specificity can change, if we want to make our programming life simple, the selector order and inlining should be only two ways to affect selectors specificity.

Say you have a big website with +20 000 lines of CSS, and on a specific page you want to make element green on hover, rather than red, but you can’t, because somewhere in those +20 000 lines there is a rule with a higher specificity than your new rule, even if it comes last in the CSS. So now you have to use !important to override the specificity and the vicious circle of specificity hell is set.

The simple solution to the specificity madness

Here’s some quotes to set the mood of this section:

Only a madman would use the whole of C++

And from Crockford:

Most programming languages contain good parts and bad parts. I discovered that I could be better programmer by using only the good parts and avoiding the bad parts.

JavaScript is famous of it’s bad parts. Brendan Eich, the guy who made JavaScript, calls these plunders “footguns”. The simple way around the footguns is not to use the footgun features, same can be applied to CSS.

A pivotal moment in my working life was to to restrict my CSS to exclude the things that caused me pain:

1. Stop the use of IDs to style elements.
2. Stop the cascade, give the element a class and go straight in.
3. If you stop those two things, then you also don’t need !important.

Conclusions

Nothing is set in stone, there are some cases where cascading is a great option, but that’s a topic for another post. Not using IDs and cascading doesn’t make you a good programmer, and using them will not make you a bad programmer. This is just a dogma among others.