BEM Class Generator Online
The best BEM naming convention tool. Generate clean, modular, and scalable CSS class lists for your frontend architecture instantly.
Elements & Modifiers
card__
card__
HTML Scaffold
<div class="card"> <div class="card__title card__title--large card__title--bold"></div> <div class="card__content"></div> </div>
CSS Blueprint
.card {
/* block styles */
}
.card__title {
/* element styles */
}
.card__title--large {
/* modifier styles */
}
.card__title--bold {
/* modifier styles */
}
.card__content {
/* element styles */
}
Generated Architecture
BLOCK
.cardELEMENTS & MODS
.card__title--large--bold.card__contentWhy BEM Architecture?
"BEM (Block, Element, Modifier) makes your CSS easier to read, scale, and maintain by providing a strict structural relationship between classes."
How to Use BEM Generator
- 1Start by entering the name of your main CSS 'Block' (e.g., 'nav' or 'button').
- 2Add 'Elements' that belong inside that block (e.g., 'item', 'link').
- 3Attach 'Modifiers' to change the state or appearance (e.g., 'active', 'large').
- 4Review the real-time generated HTML structure and CSS scaffolding below.
- 5Copy all generated classes to quickly build out your component styles.
Key Features
- Visual Mapping: Real-time visualization of the BEM tree and class relationships.
- Smart Formatting: Automatically converts inputs to kebab-case for CSS compatibility.
- Modular Scaffolding: Generates both HTML markup and CSS blueprint concurrently.
- One-Click Copy: Instantly grab all generated architecture for your IDE.
- Best Practices: Enforces a flat hierarchy to prevent CSS specificity issues.