BEM Naming Validator

BEM naming convention explained

BEM stands for Block, Element, Modifier — a CSS methodology that originated at Yandex. It produces predictable, self-documenting class names that keep CSS specificity flat and components reusable. Validating a class name means matching it against the block / element / modifier pattern.

The three parts

• Block — a standalone, meaningful component: card, site-search.
• Element — a part of a block, joined with a double underscore __: card__title.
• Modifier — a flag changing appearance or state, joined with a double hyphen --: card--featured.

These combine into the full pattern block__element--modifier, for example site-search__input--focused. Within each part, words are written in kebab-case.

Why it works

Because every selector is a single class, specificity stays flat — no deep descendant selectors, no !important wars. The block name namespaces its elements, so the same component can be dropped anywhere without style leakage. The goal is reusable components with zero nesting.

Common pitfalls

• Using camelCase (btnPrimary) instead of kebab-case (btn-primary).
• Using a single underscore or single hyphen where BEM requires __ or --.
• Chaining elements like card__body__title — BEM elements do not nest; use card__body-title.
• Capitalizing the block (Footer__copyright) — block names are lowercase.
• Mixing selectors like .button.is-active, which is not BEM (that is a state pattern from SMACSS).

FAQ

Can an element have its own elements? No — there is no block__el1__el2. Flatten it: the deepest part still belongs to the block.

Is card--featured valid on its own? A modifier is meant to accompany the block it modifies (class="card card--featured"); applied alone it has no base styling to alter.

Why double underscore and double hyphen? Doubling lets single hyphens be used freely inside kebab-case word boundaries without ambiguity between the separators and the words.