Describing the rare instances it’s okay to use !important
Since the early days of CSS, “don’t use !important” has been common advice.
The !important flag was intended for visitors of websites to easily override CSS via “user stylesheets.”
For example, you could’ve made a crude ad blocker by adding this to your user stylesheet: .ad-selector { display: none !important; }
As a user, you knew you did not want to see that ad, and the !important flag ensured that you wouldn’t.
But web developers started using !important in ways it was never intended to be used.
The !important flag it is a bad practice because it makes things unnecessarily difficult to override in the future, and should only be reserved as a last resort.
There’s almost always a better way to override CSS rules when you need to.
Making CSS rules slightly more specific
In most cases, using an !important flag is like cracking a nut with a sledgehammer. To override a CSS rule, all you need is a slightly more specific style.
For example, let’s say your <big> elements make text a little too big with the following CSS:
big { font-size: 3em; }You might be tempted to just slip an !important flag before the semicolon and call it a day, but the following custom CSS would be equally effective:
body big { font-size: 1em; }Since every web page presumably has a <body> tag, this is a pretty universal way to make CSS more specific.
However, there are a couple rare instances where it is okay to use !important.
Overriding another (ill-advised?) !important
I know you didn’t add this !important. But someone else did. Maybe through a plugin, or third-party widget, or something.
Some plugin developers will use it to make sure whatever they’re trying to display on the front-end, let’s say a form, isn’t mucked up by a theme.
And I’m not even knocking the plugin developers for doing it.
Considering how many trash themes there are out there, it is entirely justifiable for a plugin developer to ensure their product displays as intended.
The trash theme can keep being trashy, the user has a fleeting moment of happiness, and the plugin developer curbed an angry support email.
If disabling the plugin CSS is not feasible and/or you don’t want to “throw the baby out with the bath water,” it’s okay to use an !important flag to override.
Overriding JavaScript-induced inline styles
I know you’re avoiding inline styles as much as you can, but in some cases it’s unavoidable.
For example, Masonry, which will dynamically apply absolute positioning and transform styles to affected blocks.
If you want to reset the positioning, or stop them from jumping around with transforms, you need to use an !important flag to prevent it.
Because it doesn’t get more specific than inline styles, it’s okay to use an !important flag to override.
Utility classes
Chris Coyier has some ideas about these.
Bear in mind, the article was published over five years ago, but the use cases still ring true today.
For example, if having green text sprinkled throughout a site is a critical brand component, it might be a good idea to make use the following: .green { color: green !important; }
Would the green-text-sprinkled site get away with not having an !important flag? Probably. But remember, it’s a critical brand component, so it’s okay to use !important to be safe rather than sorry.
The post also covers using !important to ensure buttons have consistent styles.
For a one-off project, this would be reasonable. For a publicly released WordPress theme, its users couldn’t customize the button styles without using more !important flags.
Pretty soon, it’s an arms race. And that’s something you want to avoid when releasing themes to the public.