noImportantStyles

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="CSS" icon="seti:css"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/complexity/noImportantStyles`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`declaration-no-important`](https://github.com/stylelint/stylelint/blob/main/lib/rules/declaration-no-important/README.md)

How to configure

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

css

.style {
    color: red !important;
}

<pre class="language-text"><code class="language-text">code-block.css:2:16 <a href="https://biomejs.dev/linter/rules/no-important-styles">lint/complexity/noImportantStyles</a> 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; │ ----------- </code></pre>

Useful links

</TabItem> </Tabs>