HTML and CSS checklist

Every rule in the html and css playbook, by chapter, required rules first. Each links to its own page with how we built it and how to check it.

Structure and files

• Required Load every stylesheet from one entry file
• Required Sort styles into five layers
• Required Give each component exactly one stylesheet
• Required Write styles only in stylesheets
• Recommended Keep media and container queries with their component

The cascade

• Required Declare the layer order once
• Required Cap selector specificity
• Required Never style by id
• Required Keep !important inside the utilities layer
• Required Fence each component's styles in
• Required Import third-party CSS into its own layer
• Avoid Let source order settle a tie

Naming and state

• Required Name classes for what the element is
• Required Use one naming pattern for every class
• Required Show state through attributes
• Required Never style by position or deep nesting
• Recommended Prefix a component's custom properties with its name
• Recommended Keep script hooks apart from style hooks

HTML structure and reuse

• Required Use the native element first
• Required Pass data to templates instead of markup
• Required Keep ids unique and stable
• Required Avoid wrapper elements that only hold a class
• Recommended Give each template one root element

Checks in code

• Required Lint styles with one shared config
• Required Fail on unknown and duplicate CSS
• Required Remove selectors that match nothing
• Required Lint the built markup
• Required Keep every exception in the linter config
• Recommended Check the built CSS as well as the source

Show the badge on your project

When your project passes every Required rule, you can show this badge on your site or in your README. It links to this checklist, so anyone can run the same checks.

<a href="https://agentwranglers.se/playbook/html-css/checklist"><img src="https://agentwranglers.se/badge.svg" alt="Checked against the Agent Wranglers html and css playbook" width="214" height="20"></a>

[![Checked against the Agent Wranglers html and css playbook](https://agentwranglers.se/badge.svg)](https://agentwranglers.se/playbook/html-css/checklist)