When you can use !important
"Using !important in your CSS usually means you're narcissistic & selfish or lazy." Stephanie Rewis

"Ok, I need to add new style for element. So I'll add new class (.classA) and place it at the end of our Styles.css file. God, it doesn't work! Ok, I'll add !important statement. Yes, yes, yes! It works" And the next guy who are trying to make changes in .classA is very frustrated because his changes aren't behaving how they should. You know it from somewhere, right?

Let's start with example to remind how !important works:
p { color: red !important; }
#blue-text { color: blue; }

<p id="blue-text">Will be Red.</p>
Even if we have set id for tag (id selector has higher specificity) the !important rule overrides that property.
So let's focus on potencially good use cases:

1. Some CMS stylesheets rules There are many examples when it comes to CMS systems. Few weeks ago I tried to add styles for one of the HTML editor in aforementioned CMS. It didn't work so I decided to take a look into css and I found the editor itself has set a few !important rules of it’s own which overrides my changes.
.editor{
    background-color: white !important;
    border: 2px solid Blue: !important;
    color: blue !important;
}
By adding !important once more I was able to style editor and override those properties.

2. Javascript generated inline html In this case I believe it is easier to use !important than going through long JS files.

3. Third party widgets When you don't have full control and you don't know exactly what is the outcome of some widgets logic.

×
×