---
title: "Load every stylesheet from one entry file · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/structure-and-files/one-css-entry-file
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Load every stylesheet from one entry file

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: 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.
- How: Keep a file such as `styles/main.css` that only holds imports, in layer order. The build bundles it into one file with a content hash in its name. Templates never add their own `<link rel="stylesheet">`. The order of the imports follows [Sort styles into five layers](https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers), and the cascade order is set once by [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once).
- Check: Every built page has exactly one `<link rel="stylesheet">`, and it points to the bundled entry file. The entry file holds only `@layer` and `@import` statements.

## 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
/* styles/main.css: imports only, in layer order */
@layer tokens, base, layout, components, utilities;

@import url("tokens/index.css") layer(tokens);
@import url("base/index.css") layer(base);
@import url("layout/index.css") layer(layout);
@import url("components/index.css") layer(components);
@import url("utilities/index.css") layer(utilities);
```

### HTML example

```html
<!-- Every page of the Harbour Bakery site links the same one file -->
<link rel="stylesheet" href="/assets/main.4f9a2c.css">
```

## Related rules

- [Sort styles into five layers](https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers) in HTML and CSS
- [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/one-css-entry-file">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Next: [Sort styles into five layers](https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers)
- [Structure and files](https://agentwranglers.se/playbook/html-css/structure-and-files)