!important: when it's a smell, when it's right

What !important does

Tacks an !important flag on the declaration. !important declarations cross-cut all specificity rules — they outrank everything except other !important declarations (in which case specificity decides between them).

.alert { color: red !important; }

After this, NO normal selector can override the color. Not #main .alert, not inline style="color: blue". Only another !important rule of equal or higher specificity.

When !important is a smell

90% of !important usage is a sign the codebase has lost the specificity fight. Junior dev can't override something → adds !important → later someone needs to override THAT → adds !important higher up → arms race.

The fix is almost always: increase your selector's specificity by one class level, or rewrite the conflicting rule to be less specific.

When !important is actually correct

Three legitimate uses:

1. Utility classes (Tailwind-style). A class like .text-center { text-align: center !important; } is meant to ALWAYS win. The rule "if you applied this utility, you wanted it" is honest.
2. User stylesheets / accessibility overrides. A user setting * { font-size: 18px !important } to enforce a minimum font size — beats anything the site author tried.
3. Print stylesheets. @media print { * { background: none !important } } to ensure printers don't waste ink on dark themes.

Outside these three, treat !important as a code smell that needs investigation.

How to UN-important

You can't lower a declaration's importance. The only options:

1. Remove the !important from the source.
2. Outrank it with another !important of higher specificity.

The second is the arms race we're trying to avoid. The first is the right answer.