Agent Wranglers

Recommended

Check the built CSS as well as the source

Run the specificity, layer and unused-selector checks on the CSS the build produces, not only on the source files.

By Agent Wranglers. Updated .

How to do it

Nesting, mixins and preprocessors change selectors on the way out. A nested rule four levels deep in the source becomes one long selector in the output. Checking the output catches what the source hides, and it also covers the rules of Declare the layer order once.

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

/* Source: looks flat */
.order-card {
  .order-card-body {
    .order-card-price { }
  }
}

/* Output: 0,3,0, which breaks the cap */
.order-card .order-card-body .order-card-price { }

JSON example

{
  "scripts": {
    "lint:css:built": "stylelint \"dist/**/*.css\" --config stylelint.config.json --max-warnings 0"
  }
}

How to check

The build runs the style linter on the output file in dist/ with the same limits as on the source. It reports 0 problems.

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/check-built-css. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.