---
title: "Check the built CSS as well as the source · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/checks-in-code/check-built-css
updated: 2026-10-21
licence: "All rights reserved"
---

# Check the built CSS as well as the source

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Recommended
- Chapter: [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)
- Rule: Run the specificity, layer and unused-selector checks on the CSS the build produces, not only on the source files.
- How: 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](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once).
- 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.

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

```css
/* 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

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

## Related rules

- [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once) 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/checks-in-code/check-built-css">Agent Wranglers html and css playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Lint the built markup](https://agentwranglers.se/playbook/html-css/checks-in-code/markup-linter)
- Next: [Keep every exception in the linter config](https://agentwranglers.se/playbook/html-css/checks-in-code/one-exceptions-list)
- [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)