What is BEM and how does the generator use it?

BEM stands for Block, Element, Modifier. The generator builds names like card__title and card--featured, using a double underscore for elements and a double hyphen for modifiers, which is the standard BEM syntax.

Are the class names valid CSS selectors?

Yes. Every name uses only lowercase letters, digits, hyphens, and underscores and starts with a letter, so it is a valid class selector that needs no escaping in CSS or HTML.

What does utility-first style produce?

It produces short, single-purpose names resembling atomic CSS, such as flex, p-4, text-center, or rounded-lg. These mirror the conventions popularized by utility frameworks for composable styling.

When should I use semantic naming instead?

Semantic names describe purpose rather than appearance, like primary-action or page-header. Use them when you want markup that stays meaningful regardless of how the visual styling later changes.

Can I use these in React or Vue?

Yes. The names are framework-agnostic CSS classes, so they work in className (React), class (Vue and plain HTML), or CSS Modules. Copy them into your component and define the matching rules in your stylesheet.

CSS Class Name Generator

What this tool does

The CSS Class Name Generator produces consistent, valid class names for common UI components in three popular styles: BEM, utility-first, and semantic. Pick a component and a style, and it returns several ready-to-paste class names so your CSS architecture stays coherent instead of ad hoc.

How it works

Each style has its own assembly rule. BEM combines a block (the component), an optional element joined by __, and an optional modifier joined by -- — for example modal__header--sticky. Utility-first draws short single-purpose tokens like flex, p-4, text-center, mimicking atomic CSS. Semantic pairs a purpose word with the component, such as primary-button or page-card. Every output uses only valid class-selector characters and begins with a letter.

All names are generated locally in your browser.

Tips and notes

BEM elements use __ and modifiers use -- — the canonical syntax.
Utility names are intentionally terse and composable; combine several on one element.
Semantic names survive restyles because they describe intent, not looks.
Re-roll to explore variants and pick the one that reads best in your markup.