!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 !important to the end of any CSS rule essentially tells the browser to ignore any other competing styles that might be applied to the same element, even with higher specificity.

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 from this is: there is no way of 'beating' !important with inheritance or the cascade. A rule with !important applied to it can only be overwritten by another ‑ even more specific ‑ !important rule.

Why You Shouldn't Use It

I often see more junior developers ‑ and particularly those who haven't yet mastered specificity in CSS ‑ use !important as a quick fix rather than actually working out why it isn't behaving as they had expected. The problem is, as soon as !important has made its way into your codebase, it fundamentally breaks the cascading behaviour of the styles in your code. It leads to unexpected behaviour and can make it harder (if not impossible) to further update or maintain the code.

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).