Class B Rules

Version: 1.2.0 / Rules: 4 (Class B; all rules: A13 / B4 / C5)

Enforced by existing standard Stylelint rules.

Back to the rule reference

Naming

CSS-NAMING-001: Class names are lowercase kebab-case

• Class: B
• Level: error
• Category: naming
• stylelintRule: selector-class-pattern

Summary

Write class names in kebab-case. snake_case, camelCase, and names beginning with uppercase letters are forbidden. camelCase is allowed only for prefixes with special requirements, such as Angular.

Rationale

Fix one notation to eliminate the cost of deciding how to name things.

Good

.good-class-definition { }

Bad

.snakecase_class {}
.camelCaseClass {}
.Has-Capital-CLASS {}

What AI and reviewers check

Name new classes with lowercase words separated by hyphens. Do not use underscores or uppercase letters. Classes prefixed with .g-, .x-, and .mode- also follow this kebab-case format.

Variables

CSS-VAR-001: Custom Property names are kebab-case

• Class: B
• Level: error
• Category: variables
• stylelintRule: custom-property-pattern

Summary

Custom Property names are lowercase kebab-case. snake_case and camelCase are forbidden.

Rationale

Match class naming notation and eliminate variation.

Good

--base-margin: 12px;
--base-padding: 12px;

Bad

--base_margin: 12px;
--basePadding: 12px;

What AI and reviewers check

Write Custom Property names in kebab-case, such as –base-margin. The –v- prefix follows the same format.

Prohibited

CSS-PROHIBIT-001: No styling via ID selectors

• Class: B
• Level: error
• Category: prohibited
• stylelintRule: selector-max-id

Summary

Do not style with #id selectors. Express styling with classes.

Rationale

Avoid escalating specificity and accidental overrides.

Good

.main { }
.main-list { }

Bad

#main { }
#main ul { }

What AI and reviewers check

Always style through classes. Do not use ID selectors such as #foo for styling.

CSS-PROHIBIT-003: @layer / @scope are not used by default

• Class: B
• Level: error
• Category: prohibited
• stylelintRule: at-rule-disallowed-list

Summary

Do not use @layer or @scope by default; a conforming codebase does not need them. They are exceptions only when an external library requires them.

Rationale

The convention’s specificity and splitting policies make them unnecessary.

Good

/* Do not use @layer / @scope */

Bad

@layer base { … }
@scope (.card) { … }

What AI and reviewers check

Do not write @layer or @scope. Manage specificity through file splitting and naming.