!important: When and Why Not

Adding !important after a declaration value gives it the highest priority in the author origin cascade, overriding all other author rules for that property regardless of specificity.

There are valid reasons to use !important:

• User accessibility stylesheets — ensuring text remains readable
• Reduced motion override — disabling animations regardless of component styles
• Utility classes — ensuring a utility like .hidden always wins
• Third-party CSS override — when you cannot access the source

Utility classes that should always win are an appropriate use of !important — this is how Tailwind and Bootstrap utilities work:

!important declarations from the author origin have their own separate priority tier. Within that tier, specificity still applies — so two !important rules compete by specificity.

When you use !important to fix a specificity problem, you create a new problem: anything needing to override that rule also needs !important, leading to escalating battles.

In DevTools, an !important rule is shown with a yellow warning indicator. Crossed-out !important rules have been beaten by another !important with higher specificity — the rarest and most confusing CSS bug.

Use CSS layers instead of !important to give utility styles guaranteed priority over component styles without the !important escalation risk:

Removing !important from a large codebase is risky. The safest approach: increase specificity of the overriding rule to match what !important was providing, then remove !important in a controlled diff.

The reduced-motion override is a legitimate global use of !important:

Treat every use of !important in a code review as a potential red flag requiring explanation. If the reason is "it would not work otherwise," that signals an underlying specificity architecture problem that should be fixed rather than papered over.

Use !important for utilities with guaranteed override semantics, accessibility overrides, and third-party CSS you cannot edit. Avoid it for fixing specificity conflicts — fix the specificity problem instead.

!important overrides all author-origin specificity. Use it sparingly: utility classes, accessibility overrides, and third-party CSS patches are legitimate cases. Avoid using it to fix specificity bugs — use CSS @layer or lower specificity instead. Escalating !important usage is a sign of architectural problems.