Why NOT use !important in CSS

In this article, I will mention good reasons for you to stay away and not use !important in your project’s CSS and also how to work around this problem.

What is !important for?

!important has its use very clear:

Override any rule that is in the element, by the !important rule.

That is, in a forced and invasive way he can change an element’s style.

Note that any abrupt and ‘forced’ attitude can generate an unwanted action, especially when it comes to programming.

So that’s where the reasons begin to stay far away or to use this CSS function VERY carefully.

Why not use !important?

Well, your code will have increased maintenance difficulty by using !important in your CSS rules.

This is because you force the programmer to change the line that declared the !important, as it will overwrite the rest of the rules in that same element.

Example:

# home.css file

a {
 color: #000 !important;
}


# product.css file

a {
 color: #FFF;
}

Here we are trying to change the color of the links on the product screen to white because that’s what the layout says.

But because of the styles inherited from the home, which shouldn’t affect the product screen, it’s superimposing the color of the links to black.

This leads us to have to make another more specific CSS rule with !important, or change everything in the home as well.

In my opinion, both approaches are incorrect and lead to unnecessary code overthinking.

We should simply abandon the use of !important, in order not to have conflicts in this type of situation, which will be bad for the future of your project.

How not to use !important, ways to avoid

The biggest possibility that you will use important someday is a lack of knowledge in selector specifics.

And the second is laziness or impatience, problems related to lack of time.

If it’s option number 2, know that you’re doing great harm to the project and also to your future friend who’s going to mess with the code another day.

Stop it now! 😀

But if your job depends on using !important to fix a bug, go ahead and fix it later.

Now the case of option 1 is very easy to solve too, you will need to know the selector specificities.

In other words, how to overlap a style with a more specific one.

For this you have several strategies:

• id: id is more specific than element classes and selectors, so you can put an id on the element;
• class: a CSS class is more specific than a pure element selector;
• combination of selectors: this way you can create a hierarchy and be able to ‘componentize’ your code, isolating the styles and not needing to abuse the important;

This image, taken from freeCodeCamp, perfectly illustrates the situation, in which wins than in the item specificity.

Note: I didn’t mention inline because it’s a bad practice, don’t use this method either 😀

How to solve the situation of tag a, problem presented by !important, with id:

#link_home {
 color: #FFF;

#product_link {
 color: #000;
}

In this way, each one has its style and does not overlap one another.

How to overlay an !important in CSS

Of course, my advice is to remove the importants, but there is a way to overlay another style with important ones as well.

You just need to be more specific than above, see example:

a {
 color: #000 !important;
}

.container a {
 color: #CCC !important;
}

In this case, suppose our mission is to style this inside the class container, which is affected by the previous important.

So we simply create a more specific rule with the class .container and the a element, so we overwrite the old rule.

Where to use !important

The only situation I think is plausible is a mixture of bug and lack of time.

For example, something, whether it’s JavaScript, CSS, or whatever, is destroying the site visually.

You’ve been debugging for 30 minutes and still can’t find the source of the problem, your superiors tell you that this is impacting sales/billing.

Then I believe that when the issue is the health of the business, we can use these more forced methods to solve the problem right away.

But once the situation is normalized, in my opinion, you should go back to the source of the problem and make this correction in an ideal way, that is, without !important.

Conclusion

Remember to use specificity and separate your CSS well so that rules from other pages or sections don’t interfere in unwanted places.

You have several options like ids, classes, or even selector specificity.

Avoid the !important as much as possible, as it only harms the project and the progress of it for the rest of your team.

And that’s it for today, until the next post!