!important: When and Why Not
Learn what !important does, why it's usually a design smell, and when it's actually appropriate.
!important: When and Why Not is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What !important Does
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.
.element {
color: red !important;
/* wins over any other non-!important author rule */
}The Legitimate Use Cases
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
.hiddenalways wins - Third-party CSS override — when you cannot access the source
Utility Class Pattern
Utility classes that should always win are an appropriate use of !important — this is how Tailwind and Bootstrap utilities work:
.hidden {
display: none !important;
}
.sr-only {
clip: rect(0, 0, 0, 0) !important;
}!important and the Cascade
!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.
The Escalation Problem
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.
Debugging !important
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.
CSS @layer as Alternative
Use CSS layers instead of !important to give utility styles guaranteed priority over component styles without the !important escalation risk:
@layer components, utilities;
@layer utilities {
.hidden { display: none; }
/* wins over components by layer order, no !important needed */
}Removing !important from Legacy Code
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.
!important in Animations
The reduced-motion override is a legitimate global use of !important:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Code Review Rule
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.
Summary: Use !important Sparingly
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.
Quick Check
Two !important rules target the same property. Which wins?
Recap
!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.
Frequently asked questions
Is the “!important: When and Why Not” lesson free?
Yes — the full text of “!important: When and Why Not” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “!important: When and Why Not”?
Learn what !important does, why it's usually a design smell, and when it's actually appropriate. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “!important: When and Why Not” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.