CSS !important

In CSS, the !important rule is used to give a specific style declaration the highest weight. When you add !important to the end of a style declaration, that declaration will override any other style declaration applied to the same element for the same property, regardless of how high the specificity of the other declarations is.

Syntax

!important must be placed before the semicolon ; of the style declaration.

selector {
  property: value !important;
}

Example:

/* In style.css file */
#my-id {
  background-color: blue;
}

.my-class {
  background-color: gray !important;
}

p {
  background-color: red;
}

<p id="my-id" class="my-class" style="background-color: green;">
  What is the background color of this paragraph?
</p>

Although the inline style (style="...") and the ID selector (#my-id) have very high specificity, due to the use of !important in the .my-class rule, the final background color of this paragraph will be gray.

Cascading Order of !important

The !important rule changes the normal CSS cascading order. The browser applies styles in the following order:

1. !important declarations in the browser's default style sheet.
2. !important declarations in the user style sheet.
3. !important declarations in the developer style sheet (your CSS file).
4. Normal declarations in the developer style sheet (calculated by specificity).
5. Normal declarations in the user style sheet.
6. Normal declarations in the browser's default style sheet.

When Should You (Cautiously) Use !important?

Abusing !important is a very bad practice. It breaks the natural cascading rules of CSS, making the code hard to maintain and debug. When you start using !important to solve a style problem, you often fall into an "!important war", where you use more !importants to override previous ones, eventually leading to a messy style sheet.

However, in some specific cases, using !important is reasonable or even necessary:

1. Overriding Inline Styles: When you cannot directly modify the HTML (for example, the HTML is generated by a JavaScript plugin or CMS system that you cannot control) and you need to override inline styles on an element, !important is the only way.

2. Overriding Styles of Third-Party Libraries or Frameworks: When using CSS frameworks like Bootstrap or Materialize, sometimes you need to override their built-in, high-specificity styles. In this case, using !important might be a straightforward solution.

3. Utility Classes: In some CSS methodologies (such as BEM or Functional CSS), atomic utility classes like .text-red, .hidden, etc., may be created. These classes are designed to have the highest priority to ensure they take effect wherever they are used. In this design system, the use of !important is deliberate.

.hidden {
  display: none !important;
}

How to Avoid Using !important?

In the vast majority of cases, you can avoid using !important through better CSS practices:

1. Increase Selector Specificity: Create a more specific selector than the rule you want to override. For example, if a rule is .some-class, you can override it with div.some-class or .parent-class .some-class.

2. Use Source Order: If two rules have exactly the same specificity, the rule defined later wins. Ensure your custom style sheet is imported after the framework's style sheet.

Summary: Treat !important as the "last resort" in your CSS toolbox, not the first choice. Before writing !important, ask yourself if it is really necessary or if the problem can be solved in a more elegant way.