Agent Wranglers

Required

Use one naming pattern for every class

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.

By Agent Wranglers. Updated .

How to do it

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.

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": {
    "selector-class-pattern": ["^[a-z]+(-[a-z0-9]+)*$", { "message": "Use lowercase words and single hyphens" }]
  }
}

CSS example

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

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

How to 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.

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/naming-and-state/one-class-name-pattern. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.