Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

World Citizen

Using !important in CSS

a11y css

Don't.
























You are still here, so I guess you were expecting a more detailed explanation... here it goes:

The use of !important is considered an anti-pattern and bad practice. !important overrides all other declarations and makes the CSS code more difficult to maintain and debug. The only thing that can override an !important is another !important, and once you go down that road, it never stops.

From a Web Accessibility perspective, the use of !important is negative because it would override the end-user defined styling. And there are multiple cases in which users –and especially users with disabilities– may want to override some of the CSS properties (e.g. to enlarge the font size, or change the font-family, or even change the distribution and position of elements in a page.)

What can developers do instead of using !important?

  • Use more specific selectors: add the element tag before the class/id name, or a new class name... anything that increases the specificity of the selector.
  • Take advantage of the CSS cascade: if needed, restructure the CSS and move the CSS rules, as if two rules have the same specificity, the one that appears later "wins."

Note: as specified in the comments, there are some cases in which !important may be useful (e.g. forcing immutability in utility classes, styling email campaigns, or in the end-user styles), but in general –and for the purpose of accessibility– it is better to avoid !important because it takes away power from the users to customize the experience to better fit their needs.


Avoid using !important in CSS.

Article originally published on