CSS specificity and the cascade
The cascade and specificity are often earmarked as the reasons why CSS is hard to learn, so to help remedy that: this short guide will use some simple examples to hopefully help them make sense for you.
Let’s dive in!
The example at hand permalink
Let’s use the same example as the Twitter poll. I’ve used background
instead of color
and used some nicer colors, rather than the default red and blue ones.
This is what we get:
As you can see, both boxes are blue. But why is that? The reason is that both .red
and .blue
have the same specificity level as each other, so the browser picks the one that was declared last. In this case, that was .blue
.
If we were to switch the two classes over in the CSS, we’d end up with this:
Because .red
was declared after .blue
, the boxes are red. This is thanks to the fact that the browser cascades down the stylesheet looking for the most specific rule. The rules that were found were of equal specificity to each other, so .red
coming after .blue
means the boxes are going to be red.
A basic introduction to specificity permalink
Let’s use this same example to demonstrate some simple, common specificity situations and approaches.
Use an ID
This is probably one of the most common ways that folks will give something a specificity boost. An id
will take precedence over a class
, so in the below example, the new CSS rule #green
will override both .red
and .blue
, regardless of their order in the CSS file.
I will use this example as an opportunity to mention that the use of IDs in CSS is totally valid, but I’d recommend cautious usage. Attaching styles to classes, HTML elements and attributes gives you a lot more flexibility.
Example:
Add a style attribute
Let’s follow on from the id
example and override it. One way we can do that is add a style
attribute to the element. This will override the #green
rule because style
attributes take precedence over any rule defined in a CSS file, apart from !important
(we’ll get to that).
The following example shows that because I set the background to be purple on the #green
element in a style
attribute, it overrode all of the other styles (including those defined in .red
and .blue
).
Example:
Add an !important
Last-up in this basic introduction is !important
. This is the CSS equivalent to an articulated lorry on a country lane: it will win in pretty much any scenario.
This example, that follows on from the style
example, shows that if I add !important
to the background declaration in the .red
class, all the boxes turn red. This is because !important
takes ultimate precedence. Use !important
wisely, though. Because of its importance it becomes difficult to override. Oftentimes the use of !important
indicates that there’s probably some refactoring required.
Example
Wrapping up permalink
Hopefully, this little post helps you understand both why the answer to the Twitter poll was blue
and how cascade and specificity work on a basic level.
Understanding the cascade and specificity in CSS is really important and that knowledge will make you a better front-end developer. Knowing fundamentals about the web platform will help you to make better, more informed decisions that will likely result in more graceful, resilient problem solving. This will of course have a much more positive impact on the people that really matter: your website’s visitors.
Further reading
- CSS Specificity: Things You Should Know - Smashing Magazine (an oldie, but a goodie)
- Specifics on CSS Specificity - CSS-Tricks (another oldie, but a goodie)
- Link Specificity - Eric Meyer
- W3 Spec
- The Importance of !important: Forcing Immutability in CSS - Harry Roberts
- Batificity by Mandy Michael