Find out why using !important flag in some cases is not a good idea
The declaration is classified as significant by a !
(exclamation mark) delimiter and the important
keyword. The !important
flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.
If you need a certain CSS property to take precedence over all other CSS rules setting the same CSS property for the same HTML elements, you can add flag !important
after the CSS property when you declare it. The !important
flag has the highest precedence of all precedence factors.
Because the !important
flag has unintended consequences that interfere with one of the fundamental principles of CSS, specificity, using it frequently is considered a bad practice. To avoid using !important
, all you need to do is increase specificity. Example:
td { height: 10px !important; } /* This has higher precedence */ table td { height: 20px !important; }
Traps and how to avoid them following best practices
Using !important
, however, might be problematic and creates issues that aren’t visible at first glance. Let’s then walk through them.
- Accessibility – the use of
!important
is negative because it would override the end-user defined styling. There are multiple cases in which users, particularly those who are disabled, would desire to override some of the CSS properties (e.g. to change the font family, enlarge the font size, or even change the distribution and position of elements on a page). - Code maintenance – adding more and more
!important
flags increases the code complexity and makes rendering more unpredictable.
What can be done instead of using !important
?
Create 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. Example:#main_container .button { }
If you use Sass in your project then
mixin
can be handy here.Example mixin
for Sass$name-space: "body-container"; $name-space-active: true; @mixin name-space($parent: false) { @if $name-space-active { @if $parent { :root &##{$name-space} { @content; } } @else { :root ##{$name-space} { @content; } } } @else { @content; } }
Example of name-space
mixin
usage##{$name-space} { .myClass {} }
Result of name-space
mixin
#body-container .myClass {}
- Take advantage of the CSS cascade: if needed, change the structure of the CSS and move the rules, as if two rules have the same specificity, the one that appears later
wins
. - Use
!important
for development to quickly identify a problem in the cascade. Once the root cause in the cascade is identified find the solution, e.g. increase specificity.
Exceptions in the !important flag usage
There are some cases in which !important
may be handy. Examples: designing styles for print media, forcing immutability in utility classes, styling email campaigns, or in the end-user styles, or overriding 3rd party code and inline styles. However, it is generally advised to avoid the !important
flag because it limits users’ ability to alter the experience to better suit their needs, and overusing it increases the complexity of code maintenance.
Comments