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:
- Inline styles have higher specificity
- Selector order
- IDs have higher specificity than classes
- Cascading increases specificity
!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.
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:
- Stop the use of IDs to style elements.
- Stop the cascade, give the element a class and go straight in.
- 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.
Comments
Thanks for the article! Makes me think of ‘JavaScript the good parts’, a lot of emphasis on completely avoiding some parts of the the language.
I noticed.
Also you have a broken link (http://hilja.net/)
Thanks Simon!
This blog needs a little maintenance.