---
title: "Structure and files · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/structure-and-files
updated: 2026-10-21
licence: "All rights reserved"
---

# Structure and files

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

> Give every style one home. One entry file loads the layers in a fixed order, and each component owns exactly one stylesheet that no other file touches.

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

## Required

- [Load every stylesheet from one entry file](https://agentwranglers.se/playbook/html-css/structure-and-files/one-css-entry-file): Load all CSS through one entry file that imports every other stylesheet in a fixed order. Pages link that one built file and nothing else.
- [Sort styles into five layers](https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers): 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.
- [Give each component exactly one stylesheet](https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet): Keep all CSS for a component in one file named after it. No other file may select that component's classes.
- [Write styles only in stylesheets](https://agentwranglers.se/playbook/html-css/structure-and-files/styles-only-in-stylesheets): Keep every style declaration in a stylesheet. Templates have no `style` attributes or `<style>` elements, and scripts never set `element.style` properties.

## Recommended

- [Keep media and container queries with their component](https://agentwranglers.se/playbook/html-css/structure-and-files/queries-with-the-component): Write every media or container query inside the stylesheet of the component it changes. Never collect them in a separate file for screen sizes or print.

- Next: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- [All chapters](https://agentwranglers.se/playbook/html-css)