!important
!important overrides specificity and source order, but creates a specificity arms race. Reserve it for utility classes and accessibility overrides.
CSS
Intermediate
4 min read
!important and When to Use It
Example
/* Acceptable uses */
.sr-only { position: absolute !important; clip: rect(0,0,0,0) !important; }
.text-center { text-align: center !important; }
/* Bad use — escalation spiral */
.header .nav a { color: blue !important; }
.header .nav a.active { color: red !important; } /* had to fight back */ Pro Tip
If you use !important to fix a bug, you probably have a specificity problem, not a style problem.