Why using rule important in CSS is bad?

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.

  $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;
      }
  }

  ##{$name-space} {
    .myClass {}
  }

  #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.