!important in CSS

If you are familiar with CSS, you will be familiar with specificity and how the cascade, as well as selector types, can play a part in which styles are applied to any one element on the page.

I go into more detail about CSS specificity elsewhere, but the crux is that the order in which you write your CSS and the types of selectors you use (e.g., element selectors versus either class or id selectors) determines what your user will see.

Mastering specificity is a key skill in any junior front‑end developer's career journey.

However, there will be occasions where you either don't have control over the CSS loading onto the page (e.g., it's coming through from a third‑party source), or you just cannot find a way to inject the styling that you want to apply, into the existing code structure, to override styling already applied at a higher specificity.

These are the situations where the !important keyword comes into play. Appending it raises that declaration above ordinary declarations within the same cascade origin. Selector specificity is considered after origin and importance, so an ordinary author declaration with a more specific selector will not beat an author !important declaration.

For example, if we had a paragraph of text with two class names applied:

<p class="lead-text highlighted-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Following CSS specificity rules, if we applied a different colour with each class, then whichever of the two appears in the stylesheet later will be applied. If we used this CSS, then the text would be green:

.lead-text {
  color: navy;
}

.highlighted-text {
  color: green;
}

As an aside: bear in mind that the order that the classes are applied to the element within the markup has no bearing on specificity.

However, if we took that same CSS and simply added an !important to the first class, then the text would be navy instead:

.lead-text {
  color: navy !important;
}

.highlighted-text {
  color: green;
}

Obviously, this is a very basic example, but the thing to take away is that, within the author styles in this example, an ordinary declaration cannot beat the important one. Another !important author declaration is resolved by specificity and source order, whilst a user‑origin important declaration can outrank an author‑origin important declaration.

Why You Shouldn't Use It

I sometimes see !important used as a quick fix before anyone has worked out why a declaration is losing. It is part of the cascade, but it raises the bar for later overrides: a more specific ordinary author rule still cannot beat it. Scattering these declarations through a stylesheet can make the intended relationships harder to follow and maintain.

Generally, if I see !important used in a code review, I will sit down with the developer and work out a better way of achieving the styling override that they are hoping to achieve. It's not always easy, but there is almost always another way of achieving the same (outside of instances where you don't have complete control over the code ‑ like when third‑party styling gets involved).