BEM class names like card__title--highlighted are easy to get subtly wrong by hand — extra underscores, wrong dash count, or inconsistent casing all break the convention’s readability. This tool builds them correctly every time.
What Is the BEM Class Name Generator?
Enter a block, an optional element, and an optional modifier, and the tool builds the correctly formatted BEM class name — block, block__element, block--modifier, or block__element--modifier — automatically normalized to lowercase kebab-case. A list builder below lets you scaffold an entire block’s worth of elements and modifiers at once, plus generate an example HTML snippet.
How to Use It
- Open the tool at /tools/bem-class-generator.
- Enter your block name, and optionally an element and/or modifier.
- Copy the generated class name.
- For a full component, use the list builder to define multiple elements/modifiers at once (one per line) and copy the resulting HTML structure.
Key Features
- Correct BEM syntax every time —
__for elements,--for modifiers, combined correctly when both are present. - Automatic kebab-case normalization, so input like “User Card” becomes the valid
user-card. - Batch list builder for scaffolding an entire block’s elements and modifiers at once.
- Example HTML snippet showing the generated classes nested correctly.
When to Use This Tool
- Scaffolding a new component with consistent, predictable class names from the start.
- Reviewing or refactoring existing CSS to follow BEM conventions.
- Teaching or learning BEM naming with instant, correct examples.
Try It Now
Open BEM Class Name Generator directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.