---
title: "Give each component exactly one stylesheet · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/structure-and-files/component-stylesheet
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Give each component exactly one stylesheet

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: Keep all CSS for a component in one file named after it. No other file may select that component's classes.
- How: Name the file after the module prefix, such as `components/order-card.css` for classes starting with `order-card`. When a page needs a different look, add a variant to the component, as [Change components through variants](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants) describes. Never override it from a page file. Deleting the component then means deleting one file.
- Check: For every class prefix, a script lists the files whose selectors use it. Each prefix appears in exactly one file, except utilities.

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

### JavaScript example

```js
// Each module prefix may appear in one stylesheet only
import { readFileSync, readdirSync } from 'node:fs';
const owners = new Map();
for (const file of readdirSync('styles/components')) {
  const css = readFileSync(`styles/components/${file}`, 'utf8');
  for (const [, prefix] of css.matchAll(/\.([a-z]+-[a-z]+)/g)) {
    owners.set(prefix, (owners.get(prefix) || new Set()).add(file));
  }
}
const shared = [...owners].filter(([, files]) => files.size > 1);
shared.forEach(([prefix, files]) => console.log(`FAIL .${prefix} is styled in ${[...files].join(', ')}`));
process.exit(shared.length ? 1 : 0);
```

### Python example

```python
# The same check in Python
import pathlib, re, sys
owners = {}
for path in pathlib.Path("styles/components").glob("*.css"):
    for prefix in re.findall(r"\.([a-z]+-[a-z]+)", path.read_text()):
        owners.setdefault(prefix, set()).add(path.name)
shared = {p: f for p, f in owners.items() if len(f) > 1}
for prefix, files in shared.items():
    print(f"FAIL .{prefix} is styled in {', '.join(sorted(files))}")
sys.exit(1 if shared else 0)
```

## Related rules

- [Change components through variants](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants) in App interface
- [Keep !important inside the utilities layer](https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities) in HTML and CSS
- [Let source order settle a tie](https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins) in HTML and CSS
- [Name custom elements with the project prefix](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/custom-element-names) in HTML and CSS
- [Fail on unknown and duplicate CSS](https://agentwranglers.se/playbook/html-css/checks-in-code/unknown-and-duplicate-css) 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/component-stylesheet">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Sort styles into five layers](https://agentwranglers.se/playbook/html-css/structure-and-files/five-style-layers)
- Next: [Keep media and container queries with their component](https://agentwranglers.se/playbook/html-css/structure-and-files/queries-with-the-component)
- [Structure and files](https://agentwranglers.se/playbook/html-css/structure-and-files)