Agent WranglersStructure and files
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.
- Required 4
- Recommended 1
Required
Load every stylesheet from one entry file
RequiredLoad 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
RequiredPut 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
RequiredKeep 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
RequiredKeep every style declaration in a stylesheet. Templates have no
styleattributes or<style>elements, and scripts never setelement.styleproperties.
Recommended
Keep media and container queries with their component
RecommendedWrite 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.
For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/structure-and-files. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.