---
title: "Use one naming pattern for every class · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/naming-and-state/one-class-name-pattern
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Use one naming pattern for every class

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

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Rule: Write every class name in lowercase words joined by single hyphens, starting with the module prefix. One regular expression describes every class in the project.
- How: Pick one pattern, such as `^[a-z]+(-[a-z0-9]+)*$`, and set it in the style linter. Mixing camelCase, double underscores and single hyphens makes it impossible to search for a module's classes. An agent copying one example then spreads a second pattern. The linter config lives in [Lint styles with one shared config](https://agentwranglers.se/playbook/html-css/checks-in-code/style-linter).
- Check: The linter rule `selector-class-pattern` set to the project's pattern reports 0 problems, and a markup check finds 0 `class` values that break it.

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

```json
{
  "rules": {
    "selector-class-pattern": ["^[a-z]+(-[a-z0-9]+)*$", { "message": "Use lowercase words and single hyphens" }]
  }
}
```

### CSS example

```css
/* Passes */
.invoice-line-total { }

/* Fails: two patterns in one project */
.invoiceLine__total { }
```

## Related rules

- [Lint styles with one shared config](https://agentwranglers.se/playbook/html-css/checks-in-code/style-linter) in HTML and CSS
- [Give each template one root element](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/one-root-per-template) 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/naming-and-state/one-class-name-pattern">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Name classes for what the element is](https://agentwranglers.se/playbook/html-css/naming-and-state/name-by-role)
- Next: [Show state through attributes](https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes)
- [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)