Stop using !important and do your future self a favor

I recently contributed to an Angular project but it had one major flaw: The developer who was working before me really liked to use !important in the CSS – a lot.

New developers probably have to hear it at least once from someone to understand that by bypassing work in a very easy way you’re usually not saving time. You shift it to a later point in time where you need even more time to fix the mess you made.

So, if you haven’t heard it yet: Prevent the usage of !important – now and forever.

.header {
  color: #ffffff !important;
}

Why shouldn’t I use it?

!important is reducing the maintainability and disturbing the further development of your style-files. Especially when you use it on very common classes or elements.

Imagine you have multiple classes for a div and you want to add another class after a click on it to modify it when it gets activated. You try to change the font color that way but it won’t change. You inspect your styling and find out that another parent class is defining that color with an !important. Now you now that this is not a good practice so you remove it. Suddenly the color is changing again because the !important is not forcing the color anymore. The !important caused the whole structure of the CSS to be unstable.

And now you have to refactor the whole CSS because else you can’t get it to work. And I experience this every day because some developer thought it might be a good solution to use it.

Using !important is a bad idea in almost every case.

Are there exceptions when you should use !Important?

CSS-Tricks.com is explaining a case when it might be a good idea. If you have something like a utility class and you don’t want it to be modified you can specify the rules with !important. This way, for example a button, won’t be modified by mistake.

This might be a use case when it may make sense but for me a good style file doesn’t require !important because it should be very minimal and well organized.

So, if you want to keep your CSS clean and maintainable just promise me to do your best to rather refactor your style files or search for another solution instead of just using !important.