Keep !important inside the utilities layer

How to do it

Inside layers, !important reverses the order. An important declaration in an early layer beats one in a later layer, which surprises nearly everyone. A utility such as .visually-hidden must always apply, so it may use !important. Anywhere else, fix the conflict by moving the style to its owner, as in Give each component exactly one stylesheet.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

/* utilities/visually-hidden.css: allowed */
.visually-hidden { position: absolute !important; clip-path: inset(50%) !important; }

/* components/menu.css: fails the check */
.menu-item { display: block !important; }

JSON example

{
  "rules": { "declaration-no-important": true },
  "overrides": [
    { "files": ["styles/utilities/**/*.css"], "rules": { "declaration-no-important": null } }
  ]
}

How to check

A search of every stylesheet outside the utilities/ folder finds 0 occurrences of !important.

Sources

• CSS Cascade 5 on importance

Related rules

• Give each component exactly one stylesheet in HTML and CSS