BEM Class Name Generator — block__element--modifier

Real-world use cases

• Keep one team's CSS class names consistent

  Three engineers touch the same component library and each has a favorite casing. One writes cardTitle, another card_title, a third CardTitle. Run every name through the generator and they all land on card__title, so a pull request diff never churns on style alone. The kebab-case normalization is the quiet enforcer here: nobody argues about casing in review because the tool already decided.

• Convert a quick mockup into a BEM stylesheet

  You sketched a card with a title, an image and a footer, plus a featured variant. List card as the block, add each element, and add featured as a modifier. Copy the class list into the markup and the SCSS nesting block into your partial. In a minute the throwaway mockup has a proper BEM structure instead of a pile of ad-hoc .title and .footer classes that will collide with the next component.

• Teach BEM to a new front-end hire

  Explaining double underscore versus double hyphen in the abstract rarely sticks. Hand the new hire the tool, have them type card, title and active, and the rule clicks the moment they see card__title--active appear with the matching SCSS. The share link lets you send a worked example in chat that reopens exactly as you built it, which beats a paragraph of prose about the convention.

• Generate state modifiers for an interactive component

  A menu item has several states: active, disabled, hovered, current. Put the block and element once, then list all four states as modifiers, one per line. You get menu__item plus four variant classes in one shot, ready to drop into your component's class logic and your stylesheet, instead of hand-typing each one and risking a single-hyphen typo that silently breaks the selector.

Common pitfalls

• Nesting elements inside elements, like card__body__title. BEM elements are always flat under the block, so the right name is card__title even when the title sits visually inside a body wrapper. Keep one block, one double underscore, then the element name.

• Using a single hyphen for a modifier, writing card-active instead of card--active. A single hyphen reads as part of the kebab-case name, so card-active looks like a block named card-active rather than a modifier on card. The tool always inserts the doubled separator so this never happens.

• Making the modifier carry meaning on its own, like a global .active class. A BEM modifier should be scoped, card__title--active, not a bare .active that leaks across unrelated components and forces specificity hacks to override. Always attach the modifier to its block or element.

Privacy