0Pricing
CSS Academy · Lesson

!important: When and Why Not

Learn what !important does, why it's usually a design smell, and when it's actually appropriate.

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 .hidden always wins
  • Third-party CSS override — when you cannot access the source

All lessons in this course

  1. Specificity Calculation: Inline Style ID Class Element
  2. The Cascade: Origin and Order
  3. !important: When and Why Not
  4. Inheritance and the all Property
← Back to CSS Academy