noImportantStyles (CSS)

Language CSS

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/complexity/noImportantStyles
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is warning.
Sources:
- Same as declaration-no-important
- Same as css/no-important

How to configure

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

Description

Disallow !important declarations.

The CSS cascade normally chooses between conflicting declarations by considering factors such as cascade layers, selector specificity, and source order. !important raises a declaration’s priority and can make those conflicts harder to predict, override, and debug. Prefer adjusting the cascade, selectors, or declaration order.

Examples

Invalid

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

code-block.css:2:16 lint/complexity/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;
      │               -----------

Valid

1
.style {
2
    color: red;
3
}