CSS !important Rule

Using !important

!important gives a declaration the highest priority.

Overrides normal specificity rules.

Should be used as a last resort.

Makes debugging and maintenance harder.

Only another !important rule can override it.

/* Normal declaration */
.text {
  color: blue;
}

/* !important overrides */
.text {
  color: red !important;
}

/* Even higher specificity won't override */
#container .text {
  color: green; /* Won't apply */
}

/* Only another !important can override */
.text {
  color: purple !important; /* This wins */
}

/* Better approach: increase specificity instead */
body .container .text {
  color: orange; /* More maintainable */
}