CSS !important

Learn when and how to use the !important rule in CSS, its implications, and best practices for maintaining clean code.

The !important rule gives a CSS declaration the highest priority, overriding normal specificity rules. Use sparingly.

Basic Syntax

.element {
  color: red !important;
  font-size: 16px !important;
}

How !important Works

/* Without !important */
.text {
  color: blue; /* specificity: 10 */
}

#unique .text {
  color: red; /* specificity: 110 - wins */
}

/* With !important */
.text {
  color: blue !important; /* Overrides everything */
}

#unique .text {
  color: red; /* This is ignored */
}

Specificity Hierarchy

/* From lowest to highest priority */
element {
  color: blue;
} /* Specificity: 1 */
.class {
  color: green;
} /* Specificity: 10 */
#id {
  color: orange;
} /* Specificity: 100 */
div#id.class {
  color: purple;
} /* Specificity: 111 */
.class {
  color: red !important;
} /* Overrides all */

When to Use !important

Utility Classes

/* Utility classes that should always work */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

Overriding Third-Party CSS

/* Override plugin styles you can't edit */
.plugin-widget {
  background-color: white !important;
}

Print Styles

@media print {
  .no-print {
    display: none !important;
  }

  body {
    color: black !important;
    background: white !important;
  }
}

When NOT to Use !important

Normal Styling

/* BAD: Using !important unnecessarily */
.button {
  background-color: blue !important;
  color: white !important;
}

/* GOOD: Proper specificity */
.button {
  background-color: blue;
  color: white;
}

Fixing Specificity Issues

/* BAD: Band-aid solution */
.nav li a {
  color: blue !important;
}

/* GOOD: Proper specificity */
.nav-link {
  color: blue;
}

Overriding !important

/* Only another !important can override */
.class {
  color: red !important;
}

/* This won't work */
#id {
  color: blue;
}

/* This will work */
#id {
  color: blue !important;
}

/* Inline styles with !important win */
/* <div style="color: green !important;"> */

Problems with !important

Maintenance Nightmares

/* Cascading !important hell */
.text {
  color: blue !important;
}

.special-text {
  color: red !important; /* Must use !important */
}

.super-special-text {
  color: green !important; /* Must use !important */
}

Debugging Difficulty

/* Hard to debug why styles aren't applying */
.button {
  background: red !important; /* Hidden deep in CSS */
}

/* Developer confused why this doesn't work */
.primary-button {
  background: blue; /* Ignored */
}

Alternatives to !important

Increase Specificity

/* Instead of */
.button {
  color: white !important;
}

/* Use more specific selector */
.header .nav .button {
  color: white;
}

Use Better Selectors

/* Instead of */
div {
  margin: 0 !important;
}

/* Use class */
.no-margin {
  margin: 0;
}

Restructure CSS

/* Instead of fighting specificity */
body .widget .button {
  color: blue;
}

body .widget .special .button {
  color: red !important;
}

/* Restructure */
.widget-button {
  color: blue;
}

.widget-button--special {
  color: red;
}

Removing !important

/* Before */
.element {
  width: 100% !important;
}

/* After - check what was being overridden */
.container .element {
  width: 100%; /* May need specificity */
}

Avoid !important except for: - Utility classes - Overriding third-party CSS - Print styles - Truly critical overrides Instead: - Write more specific selectors - Restructure CSS for better organization - Use BEM or similar methodology - Avoid overly specific selectors initially - Plan CSS architecture carefully

Debugging !important

/* Use browser DevTools */
/* Look for "!important" in styles panel */
/* Check which rules are being overridden */

/* Search codebase */
/* grep -r "!important" styles/ */

Code Review Red Flags

/* Warning signs */
.element {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  /* Multiple !important = architectural problem */
}

Refactoring Strategy

Identify why !important was added
Check what it's overriding
Restructure selectors if possible
Use classes instead of complex selectors
Document if !important is truly necessary
Test thoroughly after removal

Use !important sparingly - it's a tool of last resort, not a first solution!

The !important rule gives a CSS declaration the highest priority, overriding normal specificity rules. Use sparingly.

Basic Syntax

.element {
  color: red !important;
  font-size: 16px !important;
}

How !important Works

/* Without !important */
.text {
  color: blue; /* specificity: 10 */
}

#unique .text {
  color: red; /* specificity: 110 - wins */
}

/* With !important */
.text {
  color: blue !important; /* Overrides everything */
}

#unique .text {
  color: red; /* This is ignored */
}

Specificity Hierarchy

/* From lowest to highest priority */
element {
  color: blue;
} /* Specificity: 1 */
.class {
  color: green;
} /* Specificity: 10 */
#id {
  color: orange;
} /* Specificity: 100 */
div#id.class {
  color: purple;
} /* Specificity: 111 */
.class {
  color: red !important;
} /* Overrides all */

When to Use !important

Utility Classes

/* Utility classes that should always work */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

Overriding Third-Party CSS

/* Override plugin styles you can't edit */
.plugin-widget {
  background-color: white !important;
}

Print Styles

@media print {
  .no-print {
    display: none !important;
  }

  body {
    color: black !important;
    background: white !important;
  }
}

When NOT to Use !important

Normal Styling

/* BAD: Using !important unnecessarily */
.button {
  background-color: blue !important;
  color: white !important;
}

/* GOOD: Proper specificity */
.button {
  background-color: blue;
  color: white;
}

Fixing Specificity Issues

/* BAD: Band-aid solution */
.nav li a {
  color: blue !important;
}

/* GOOD: Proper specificity */
.nav-link {
  color: blue;
}

Overriding !important

/* Only another !important can override */
.class {
  color: red !important;
}

/* This won't work */
#id {
  color: blue;
}

/* This will work */
#id {
  color: blue !important;
}

/* Inline styles with !important win */
/* <div style="color: green !important;"> */

Problems with !important

Maintenance Nightmares

/* Cascading !important hell */
.text {
  color: blue !important;
}

.special-text {
  color: red !important; /* Must use !important */
}

.super-special-text {
  color: green !important; /* Must use !important */
}

Debugging Difficulty

/* Hard to debug why styles aren't applying */
.button {
  background: red !important; /* Hidden deep in CSS */
}

/* Developer confused why this doesn't work */
.primary-button {
  background: blue; /* Ignored */
}

Alternatives to !important

Increase Specificity

/* Instead of */
.button {
  color: white !important;
}

/* Use more specific selector */
.header .nav .button {
  color: white;
}

Use Better Selectors

/* Instead of */
div {
  margin: 0 !important;
}

/* Use class */
.no-margin {
  margin: 0;
}

Restructure CSS

/* Instead of fighting specificity */
body .widget .button {
  color: blue;
}

body .widget .special .button {
  color: red !important;
}

/* Restructure */
.widget-button {
  color: blue;
}

.widget-button--special {
  color: red;
}

Removing !important

/* Before */
.element {
  width: 100% !important;
}

/* After - check what was being overridden */
.container .element {
  width: 100%; /* May need specificity */
}

Best Practices

!important Best Practices

Debugging !important

/* Use browser DevTools */
/* Look for "!important" in styles panel */
/* Check which rules are being overridden */

/* Search codebase */
/* grep -r "!important" styles/ */

Code Review Red Flags

/* Warning signs */
.element {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  /* Multiple !important = architectural problem */
}

Refactoring Strategy

Identify why !important was added
Check what it's overriding
Restructure selectors if possible
Use classes instead of complex selectors
Document if !important is truly necessary
Test thoroughly after removal

Use !important sparingly - it's a tool of last resort, not a first solution!

CSS !important

On this page

CSS !important

On this page