noImportantStyles

CSS

Summary

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

How to configure

biome.json

{
  "linter": {
    "rules": {
      "complexity": {
        "noImportantStyles": "error"
      }
    }
  }
}

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

.style {
    color: red !important;
}

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

Useful links

• MDN

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases