!IMPORTANT: Why you should (almost) NEVER use !important in your CSS:

By August 24, 2020No Comments

The !important property in CSS is like a facist veto that overrides all previous styling rules and applies the rule denoted by !important. This means that all subsequent rules on an element are to be ignored.

For example:

h1 { color: red !important; }
#element { color: blue; }

<h1 id=”element” > I should be Blue but I’m RED </h1>

This means that even though the #element ID selector has higher specificity and normally would make the above h1 tag BLUE, it ends up being RED because the !important rule overrides it.

I have worked on several projects where I find myself wondering why the CSS isn’t behaving as it should. Nine out of ten times the !important is the culprit and has been abused by a previous dev.

Sorry to say this, but 99% of the time using !important means you’re lazy. Respect the future devs that will come after you and don’t use !important.

Yesterday I worked on a simple task for a client that took way longer than expected because the CSS used so many !importants that it was immoral. So here is a friendly reminder for anyone who likes to throw around this property like confetti to think twice before using this facist property.

I’m not saying there’s no use cases- !important is useful for utility classes, user style sheets, or for accessibility. Maybe it could even be justified to temporarily fix an URGENT problem.

As a wise man once said, !important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted

Leave a Reply