CSS

`css/no-important`

!important appears only in utility classes, user-preference overrides and third-party overrides, never to win a specificity fight.

minorstaticfe-css-architecture

Why

An !important declaration can only be beaten by another !important, so each one invites the next and the cascade stops being readable. It is usually a sign that the selectors or the order of the stylesheets are wrong.

Fix

Put the styles in cascade layers in the order they should win (@layer reset, base, components, utilities;), lower the specificity of the rule you are fighting (:where(), one class), or move the override into the component. Keep !important for single-purpose utilities (.sr-only, .hidden), user-preference blocks (prefers-reduced-motion, forced-colors) and overrides of third-party inline styles; mark the last with fs-ignore css/no-important and the reason.

Examples

/* bad */
.header .nav a.active { color: #fff !important; }
/* good */
@layer base, components, utilities;
@layer components { .nav__link[aria-current="page"] { color: var(--color-on-brand); } }

Sources

Facts

Id: css/no-important
Severity: minor
Check: static checked in the source by audit
Applies to: css scss less html vue svelte astro
Taught by the skill: fe-css-architecture CSS architecture and tokens
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/no-important