Why using rule important in CSS is bad?

Find out why using !important flag in some cases is not a good idea

The !important CSS rule is usually considered as bad practise since it overrides all other styles, regardless of their specificity. This might make it tough to manage your stylesheets and cause unexpected behavior on your website.

What is !important CSS rule?

In CSS, a property or value can have its normal priority increased by using the !important rule. Any prior style rules for a particular property on an element are superseded when the !important rule is applied to that property. This indicates that the !important rule will take precedence and override the styling, regardless of whether other selectors have a greater specificity.

The !important flag alters the rules selecting declarations inside the cascade. !important is a modifier for the cascading order.

The cascade in CSS refers to the process of determining which styles should be applied to an element when multiple conflicting styles are present. The cascade sorting order determines the priority of declarations and helps determine which styles will be applied. The cascade sorts declarations in descending order of priority based on the following criteria:

1. Transition declarations
2. Important user agent declarations
3. Important user declarations
4. Important author declarations
5. Animation declarations
6. Normal author declarations
7. Normal user declarations
8. Normal user agent declarations

See Cascade Sorting Order from CSS Cascading and Inheritance Level 5.

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.

Is using the CSS !important rule bad?

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

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.