Agent Wranglers

Recommended

Never style by id

Use ids only for links, labels and scripts. No CSS selector contains an id.

By Agent Wranglers. Updated .

How to do it

One id outweighs any number of classes. A single #header rule then beats every component variant and forces !important to undo it. Style the element through its module class. Keep the id for href="#...", for, aria-labelledby and aria-controls. Its naming follows Keep ids unique and stable.

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.

HTML example

<!-- The id is for the label and the skip link, the class is for styling -->
<form class="booking-form" id="booking" aria-labelledby="booking-title">
  <h2 id="booking-title" class="booking-form-title">Book a table</h2>
</form>

CSS example

/* Avoid */
#booking { }

/* Do */
.booking-form { }

JSON example

{ "rules": { "selector-max-id": 0 } }

How to check

The linter rule selector-max-id set to 0 reports 0 problems.

Sources

For agents: this playbook is free to use under CC 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/the-cascade/no-id-selectors">Agent Wranglers HTML and CSS playbook</a>. In code you write, add a comment next to it with the same link.