noImportantStyles

Summary

Diagnostic Category: lint/nursery/noImportantStyles
This rule has an unsafe fix.
The default severity of this rule is warning.
Sources:
- Same as stylelint/declaration-no-important

Description

Disallow the use of the !important style.

The !important CSS style is a declaration used to give a specific rule higher precedence over other conflicting rules. When it is applied to a CSS property, that property’s value is prioritized over any other declarations, regardless of specificity or order of appearance in the stylesheet.

How `!important` Works

Normally, CSS rules follow a cascade order, where the browser decides which rules apply based on specificity, inheritance, and proximity to the targeted element.
Adding !important to a rule overrides this cascade logic, forcing the rule to apply even if other rules have higher specificity or are defined later.

Why `!important` Should Be Avoided

While !important can solve specific and immediate styling issues, its effects can result in long-term problems within a codebase:

Breaks the Cascade Logic: It overrides the natural flow of cascading rules, making it harder to predict which styles will apply.
Increases Complexity: Once !important is used in a stylesheet, other developers may respond by using it even more aggressively, creating a cycle of overrides and increasing maintenance difficulty.
Reduces Reusability: Overriding styles often makes components less flexible, as future adjustments require more effort.
Hinders Debugging: Debugging styles becomes more challenging, as developers must account for the !important rule overriding expected behavior.

Examples

Invalid

1
.style {
2
    color: red !important;
3
}

code-block.css:2:16 lint/nursery/noImportantStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Avoid the use of the !important style.
  
    1 │ .style {
  > 2 │     color: red !important;
      │                ^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ This style reverses the cascade logic, and precedence is reversed. This could lead to having styles with higher specificity being overridden by styles with lower specificity.
  
  ℹ Unsafe fix: Remove the style.
  
    2 │ ····color:·red·!important;
      │               -----------

Useful links

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noImportantStyles": "error"
6
      }
7
    }
8
  }
9
}