Free BEM Class Name Generator
The BEM Class Name Generator builds consistent Block__Element--Modifier class names so your CSS stays predictable and collision-free. Enter a block, add elements and modifiers, and copy the finished class list.
How to Use
Type a block name, then add any elements and modifiers. The generated class name updates live and follows the BEM naming convention exactly.
- Follows the block__element--modifier convention
- Add multiple elements and modifiers at once
- Handles multi-word names with kebab-case
- Copy a single class or the whole set
- Runs entirely in your browser
What is BEM?
BEM stands for Block, Element, Modifier. A block is a standalone component (card), an element is a part of it (card__title), and a modifier changes a state or variant (card--featured). The pattern keeps specificity flat and names self-documenting.
Related Developer Tools
You might also need
Tools from other categories that people pair with the BEM Generator: