Class Naming Conventions — Allowed

This gauge covers Chapter 23 after the Page Layout System chapter.

Learning goal

Adopt one class-naming convention for a page or component set, and apply it consistently. Treat Reference-style block__element as a useful convention — not as strict BEM.

Inherited tools

Everything allowed through ../layout-system/allowed.md remains available.

New concepts

• A block name for a component root (for example card, nav, hero)
• An element name joined with a double underscore: card__title
• Optional modifier with a double hyphen or a separate state class: card--featured or is-active
• Recognizing that nav__menu__btn (two element levels) is common in the wild but is not strict BEM — prefer nav__menu-btn or a flatter name when learning
• Flat kebab names (.northstar-marquee) and kebab-block + __ element (.nav-classic-brand__panel) as alternate conventions already in this repo

Learning rules

1. Pick one convention per page or design system surface and stick to it.
2. Name for meaning (card__title), not appearance (big-blue-text).
3. Prefer one element level under a block when learning (block__element).
4. Do not mix flat names, block__element, and kebab-block __ element styles inside the same component without a reason.
5. Class names are not semantics — landmarks and headings still come from HTML.

Not allowed

• JavaScript
• Claiming a convention is “strict BEM” when it uses nested __ chains
• Renaming the whole workbook in this chapter (study the pattern; later work can migrate intentionally)
• Inline styles

Pages

• 01-block-element.html — build a small component with block__element
• 02-pick-one.html — compare three conventions and choose one for a nav

Rules to lean on

Rules on naming added beside the selector guidance in rules.md, plus rules 12, 51–53, and 72–80.