When to use !important in CSS

“Don’t use !important” is one of those “rules” you absorb as a beginner coder that turns out to be mostly nonsense—like “Don’t use elements for whitespace”.

Here’s what !important means:

• I know I want this rule to apply, and no-one will need to override it in the future

• Some other rule is currently overriding it, and I either don’t have control over that code or it would be a pain to refactor it to achieve precedence via the usual mechanisms (selector specificity, or using the style attribute vs rules defined in a stylesheet)

That’s it. !important isn’t “badly designed” or an “anti-pattern”, it’s just another way of indicating precedence.