CSS Lab · LAB-02Under investigation
“Just add !important.”
It works exactly once. Then it becomes the thing the next person has to defeat, and the only way to defeat it is another !important.
- Verdict
- BUSTED
- Level
- DEVELOPER
- Division
- LAB-02
- References
- 02
Investigation
!important does not raise specificity, it moves the declaration into a different cascade origin layer. Author-important beats author-normal, and the only thing that beats author-important is user-important, or another author-important declaration with higher specificity.
| # | Origin |
|---|---|
| 1 | User-agent normal |
| 2 | User normal |
| 3 | Author normal (including @layer, in layer order) |
| 4 | Animations |
| 5 | Author !important (layer order reverses here) |
| 6 | User !important |
| 7 | User-agent !important |
| 8 | Transitions |
Cascade layers give you the outcome people reach for !important to get, without the escalation. Declarations in a later layer beat earlier layers regardless of specificity, so a reset layer can use whatever selectors it likes and still lose to components.
example.csscss
@layer reset, framework, components, utilities;@layer framework { #sidebar .nav a { color: blue; } /* high specificity… */}@layer utilities { .text-ink { color: black; } /* …still wins: later layer */}