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.