BEM Class Name Generator

BEM stands for Block, Element, Modifier — a CSS naming convention where a Block is a standalone reusable component (like `.card`), an Element is a part of that block written as `block__element` (like `.card__title`), and a Modifier represents a variant or state written as `block--modifier` or `block__element--modifier` (like `.card--highlighted`) — it solves the problem of CSS specificity conflicts and unclear ownership by making every class name self-documenting.

BEM convention (as popularized by Yandex, who created it) uses lowercase, hyphen-separated words within each part of the name — normalizing input automatically means you can type a block name like "User Card" and still get a spec-compliant `user-card` output without manually reformatting it.

The top section builds one class name at a time from three separate fields; the list builder lets you define an entire block's worth of elements and modifiers at once (one per line, like "element: title, modifier: highlighted") and see every resulting class name together, which is faster when scaffolding a whole component.

Yes — if you fill in both an element and a modifier, the tool produces the full `block__element--modifier` form, matching BEM's convention for a variant of a specific sub-part of a block (like `.card__button--disabled`).

The example HTML focuses on elements (parts nested inside the block), since that's the more common structural use case — modifiers are typically added as an additional class alongside the base block or element class in real markup, which you can combine manually using the class names shown above.