Agent WranglersChecks in code
Turn every HTML and CSS rule into a linter rule or build check. A style that breaks a limit then stops the build before anyone has to spot it.
- Required 5
- Recommended 1
Required
Lint styles with one shared config
RequiredRun a style linter such as stylelint over every stylesheet in the build, with one config file in the repository. The build fails on any error or warning.
Fail on unknown and duplicate CSS
RequiredMake the linter reject unknown properties, values, at-rules and type selectors, and duplicate selectors or properties.
Remove selectors that match nothing
RequiredFail the build when a class or attribute selector in the stylesheets matches no element in any built page. The only exceptions sit on one list of states and classes that scripts add.
Lint the built markup
RequiredRun a markup linter such as html-validate over every built page, with rules for structure on top of validity. Turn on rules against inline styles, duplicate ids, redundant roles and ARIA patterns that have a native element.
Keep every exception in the linter config
RequiredWrite every exception to a lint rule in the config file, with a reason and a file path. Source files contain 0 comments that turn a linter off.
Recommended
Check the built CSS as well as the source
RecommendedRun the specificity, layer and unused-selector checks on the CSS the build produces, not only on the source files.
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/checks-in-code. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.