All notes

Using '!important' in CSS

When the CSS escape hatch is useful, when it creates problems, and why specificity should come first.

CSS code on a computer screen

'!important' is a special rule in CSS that forces a style to override other styles, no matter what.

When to use it:

  • Only when you need to change styles you cannot edit, like from a library or template.

When to avoid it:

  • Don’t use it for normal styling. Too much '!important' makes your CSS messy and hard to manage.

The '!important' declaration forces a CSS rule to take precedence over other conflicting styles, regardless of specificity. It can be useful in cases where you need to override styles from third-party libraries or code you cannot modify.

However, avoid overusing it in regular styling. Excessive use of '!important' can make your CSS harder to maintain, create conflicts and reduce flexibility, as it bypasses the natural cascading and specificity rules that CSS relies on. Use it sparingly and only when absolutely necessary.