---
title: "Keep !important inside the utilities layer · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities
updated: 2026-10-21
licence: "All rights reserved"
---

# Keep !important inside the utilities layer

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Required
- Chapter: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: Write `!important` only in the utilities layer. Every other layer has 0 `!important` declarations.
- How: 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](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet).
- Check: A search of every stylesheet outside the `utilities/` folder finds 0 occurrences of `!important`.

## 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

```css
/* 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

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

## Sources

- [CSS Cascade 5 on importance](https://www.w3.org/TR/css-cascade-5/#importance)

## Related rules

- [Give each component exactly one stylesheet](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities">Agent Wranglers html and css playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Never style by id](https://agentwranglers.se/playbook/html-css/the-cascade/no-id-selectors)
- Next: [Fence each component's styles in](https://agentwranglers.se/playbook/html-css/the-cascade/scope-component-styles)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)