---
title: "Sort styles into five layers · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Sort styles into five layers

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.

- Level: Recommended
- Chapter: [Structure and files](https://agentwranglers.se/playbook/html-css/structure-and-files)
- Rule: Put every style in one of five layers, in the order tokens, base, layout, components and utilities. Each layer has its own folder, and a file belongs to exactly one layer.
- How: Tokens hold custom properties only, as [Take every style value from design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens) describes. Base styles bare elements such as `body`, `a` and `table`, with no classes. Layout places regions of the page. Components style one module each. Utilities are the few single-purpose classes on the written list from [Give every module its own class names](https://agentwranglers.se/playbook/website/site-architecture/module-class-names). A later layer may use what an earlier layer defines, never the other way round.
- Check: Every CSS file sits in one of the five folders. Files in `tokens/` declare only custom properties. Files in `base/` contain no class selectors. Files in `utilities/` define only classes on the written list.

## 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
/* tokens/index.css: custom properties only */
:root { --surface: Canvas; --text: CanvasText; }

/* base/elements.css: bare elements, no classes */
a { color: var(--text); }

/* components/order-card.css: one module */
.order-card { background: var(--surface); }
```

### JavaScript example

```js
// A build check: base files contain no class selectors
import { readFileSync, readdirSync } from 'node:fs';
const failures = readdirSync('styles/base')
  .filter(file => /\.[a-z][\w-]*\s*[{,:]/.test(readFileSync(`styles/base/${file}`, 'utf8')));
failures.forEach(file => console.log(`FAIL styles/base/${file} selects a class`));
process.exit(failures.length ? 1 : 0);
```

### Python example

```python
# The same check in Python
import pathlib, re, sys
failures = [p for p in pathlib.Path("styles/base").glob("*.css")
            if re.search(r"\.[a-z][\w-]*\s*[{,:]", p.read_text())]
for p in failures:
    print(f"FAIL {p} selects a class")
sys.exit(1 if failures else 0)
```

## Related rules

- [Load every stylesheet from one entry file](https://agentwranglers.se/playbook/html-css/structure-and-files/one-css-entry-file) in HTML and CSS
- [Take every style value from design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens) in App interface
- [Give every module its own class names](https://agentwranglers.se/playbook/website/site-architecture/module-class-names) in Website
- [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once) 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/structure-and-files/five-style-layers">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Load every stylesheet from one entry file](https://agentwranglers.se/playbook/html-css/structure-and-files/one-css-entry-file)
- Next: [Give each component exactly one stylesheet](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet)
- [Structure and files](https://agentwranglers.se/playbook/html-css/structure-and-files)