css/no-important

Dlaczego

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.

Poprawka

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.

Przykłady

/* 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); } }

Źródła

• MDN, !important
• MDN, Cascade layers
• W3Schools, CSS The !important Rule

Przeczytaj w terminalu

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