# Using !important in 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](https://uxengineer.com/css-specificity-avoid-important-css/) and [**bad practice**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception). `!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](https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467)**. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): add the element tag before the class/id name, or a new class name... anything that increases the [specificity](https://specificity.keegan.st/) 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](https://csswizardry.com/2016/05/the-importance-of-important/), 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.**