Warning !important overuse

Why relying on !important repeatedly in one rule is a sign of a specificity problem worth fixing at the source.

The validator warns when a single rule uses !important three or more times.

Example

/* Flagged: reaching for !important repeatedly */
.button {
  color: white !important;
  background: blue !important;
  padding: 0.5rem !important;
}

Why it matters

!important overrides the normal cascade order, so a declaration marked with it beats even a more specific selector that comes later. Used sparingly — a single override for a genuinely exceptional case, like patching a third-party widget's styles you can't otherwise reach — it's a reasonable escape hatch. Reaching for it repeatedly in one rule usually means something upstream in the cascade has too much specificity or is loading in the wrong order, and !important is being used to brute-force around that instead of fixing it. Once several rules resort to it, the next necessary override has to add another !important just to win, and the cascade stops meaning anything.

Frequently asked questions

Is !important ever the right tool?

Yes, in narrow cases — overriding inline styles you can't edit, or patching third-party CSS you don't control. The issue is habitual use as a workaround for specificity fights within your own stylesheet, which tends to spiral.

What's a better fix than adding more !important?

Trace why the lower-specificity rule isn't winning — usually an earlier rule is more specific than it needs to be, or a later rule that should win is loading before it or has lower specificity than expected. Fixing the specificity or load order at the source avoids needing !important at all.