Skip to main content
Back to Tools
Web Tools

BEM Class Generator

Generate BEM (Block Element Modifier) CSS class names from component definitions. Outputs class lists, CSS skeletons, and sample HTML. Supports custom separators and prefixes. Runs entirely in your browser — your data never leaves your machine.

bem css class-names naming-convention methodology

Published May 31, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Define a block name, add elements, and attach modifiers to each element. The tool generates all BEM class names following the Block__Element—Modifier convention, along with a CSS skeleton with empty rule blocks and sample HTML that uses the generated classes.

Features

  • Full BEM output: block, element, and modifier class names
  • CSS skeleton: generates stylesheet with empty rules for each class
  • HTML preview: sample markup using the generated classes
  • Custom separators: configure element (__), modifier (--), and value (-) separators
  • Prefix support: add a namespace prefix (e.g., c-, o-)
  • Validation: checks block/element names for BEM-valid characters
  • 5 examples: card component, navigation, form with validation, media object, modal
  • Private: all generation runs in your browser — no data transmitted

Use Cases

  • Scaffolding CSS class structures for new components
  • Enforcing consistent BEM naming across a team
  • Generating CSS boilerplate from component specifications
  • Learning BEM methodology with interactive examples