---
title: "The cascade · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# The cascade

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

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

> Decide which style wins before anyone writes one. Declare the layer order once, cap selector specificity, and never let file order settle a conflict.

**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">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

## Recommended

- [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once): Declare every cascade layer in one `@layer` statement at the top of the entry file. Put every style inside a named layer, so no style is left unlayered.
- [Cap selector specificity](https://agentwranglers.se/playbook/html-css/the-cascade/specificity-limit): Keep every selector at a specificity of `0,2,0` or lower. That is at most two classes, attributes or pseudo-classes, with no ids.
- [Never style by id](https://agentwranglers.se/playbook/html-css/the-cascade/no-id-selectors): Use ids only for links, labels and scripts. No CSS selector contains an id.
- [Keep !important inside the utilities layer](https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities): Write `!important` only in the utilities layer. Every other layer has 0 `!important` declarations.
- [Fence each component's styles in](https://agentwranglers.se/playbook/html-css/the-cascade/scope-component-styles): Make every selector in a component file start at the component's root. Use the module prefix on each class, or wrap the file in `@scope` on the root class.
- [Import third-party CSS into its own layer](https://agentwranglers.se/playbook/html-css/the-cascade/vendor-css-layer): Import every third-party stylesheet into a named layer placed before your own layers. Never edit a vendor file in place.

## Avoid

- [Let source order settle a tie](https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins): Never depend on which file loads last to decide between two rules of the same layer and specificity.

## Read this with

- [Website playbook](https://agentwranglers.se/playbook/website). Keep the cascade under control with layers and a specificity limit, so a later rule never wins by accident.

- Previous: [Structure and files](https://agentwranglers.se/playbook/html-css/structure-and-files)
- Next: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- [All chapters](https://agentwranglers.se/playbook/html-css)