Agent Wranglers

Required

Fail on unknown and duplicate CSS

Make the linter reject unknown properties, values, at-rules and type selectors, and duplicate selectors or properties.

By Agent Wranglers. Updated .

How to do it

A typo such as colr or dispaly: grid is ignored by the browser without a sound. A second .order-card block in the same file splits one component in two. Turn on the linter's unknown and duplicate rules, and allow vendor prefixes only through the build tool. Duplicates across files are caught by Give each component exactly one stylesheet.

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.

JSON example

{
  "rules": {
    "property-no-unknown": true,
    "declaration-property-value-no-unknown": true,
    "at-rule-no-unknown": true,
    "selector-type-no-unknown": true,
    "no-duplicate-selectors": true,
    "declaration-block-no-duplicate-properties": true,
    "property-no-vendor-prefix": true
  }
}

CSS example

/* Each line fails the lint */
.order-card { dispaly: grid; }
.order-card { margin: 0; margin: 0; }
@layr components { }

How to check

The linter rules in the example below are all on. The build fails when you add dispaly: grid or a second .order-card block to a component file.

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