CSS: In defense of !important

What’s wrong with !important

Imagine a situation like this:

div {
  background-color: blue;
  font-size: 2em;
}

div.some-item-whatever {
  background-color: red;
}

div#item {
  background-color: green;
  font-size: 3em;
}

This is quite easy to understand. All <div> have a font-size of 2 ems and are blue. Except for the ones with the class some-item-whatever, which are red. Except for the one with an ID of item, which is green and has a bigger text.

Why?

Because of specificity.

We can understand it, and we know how each selector trumps each other at a glance.

Now imagine this:

div {
  background-color: blue !important;
  font-size: 2em;
}

Damn, now every <div> has a blue background.

What’s wrong with this?

First of all, we are not sure of its reach: how many items are you trumping at once?

Secondly, that !important is applied at a property level. We cannot reason about specificity anymore by looking at selectors.

The <div> will have a font-size of 3em, but a blue background.

This is bad, because it is unexpected.

It is bad because the only way to trump an !important style is by using another !important.

[insert snowball gif here]

Weren’t you supposed to defend !important?

Ehrmm, you’re right.

Usually, when we use !important is because we don’t have enough time to refactor the mess we are in. So we drop an !important and call it a day.

This is a reactive !important.

And we only love reactivity in Javascript, not in CSS. (easy that one, huh?)

We should embrace proactive !important in situations where it makes sense. For instance, in our utility classes:

.hidden {
  display: none !important;
}

The difference here is that I always want to hide an element with this class. No questions. !important there is useful and conveys purpose. It is also immutable.

This is the primary use I give !important on a daily basis. I can think of other use cases, way less frequent:

• Overriding 3rd party code.
• Different media (for instance, if you need to set unique attributes for the print version of your page).

Besides that, I’d argue that using !important is a code smell, and we should avoid it.

TL;DR version

• !important is bad if you use it reactively — this means you should avoid breaking specificity rules and cascading because you want to trump yourself.
• If you use !important out of laziness, you are not taking into account the implications of your actions. It will grow, you (and your team) will end up abusing it, and you are going to end up with a messy, unmaintainable code and ranting on Twitter.
• !important is OK when used proactively. It’s an outstanding way to achieve immutability in CSS.
• It comes in hand with an utility-first approach, where utility classes should do one thing and do it well (SRP).
• And, well, !important is the only way to trump inline styles. So if you are using some third-party code that provides inline styles (why would you?)… then this is the only way to go.