GenerateRandomSearch

CSS Class Name Generator

Generates an example CSS class name in a common BEM-ish convention (e.g. card__title, btn--active) — a naming-convention example distinct from a plain URL slug's format.

What this generator does

Produces an example class name in the block-element-modifier convention, where the double underscore marks a part of a component and the double hyphen marks a variant. The convention exists to make specificity flat: every selector is one class, so nothing needs to out-rank anything else.

What it builds, and how many ways

Each result is assembled to this shape: [block] + [element] — one of 3 sentence patterns this generator uses.

  • block: 8 options
  • element: 8 options

Taken together those banks can be assembled 136 different ways, repeating after about 15.

Some results it can produce:

  • card__link
  • footer--active
  • nav-link
  • form__link

A fixed sample so this page stays the same between visits. Your own results are assembled at random, each slot filled independently and each press independent of the last, so the same result can come up twice — past the repeat figure above, seeing one twice is more likely than not.

How to use this tool

  1. Press generate for a class name.
  2. Generate again for another one.

Common use cases

  • CSS/component naming inspiration
  • Teaching BEM-style conventions
  • Documentation/mockup examples

Limitations and good to know

  • These are illustrative names for documentation and mockups, not names for your actual components — a class name should describe what the thing is in your interface, which no generator can know.

Each part of the result is chosen independently with your browser's cryptographic random number generator, so every option in a bank is equally likely. How Generate Random works.

Related generators