CSS Class Namer
Stop arguing about class names. Enter your block, choose a naming style, list the elements and modifiers, and get a full class list with a CSS skeleton and an HTML snippet you can paste into your project.
Class list
CSS skeleton
HTML snippet
How to use
- Type your block name, for example product-card.
- Pick a naming style: BEM, kebab-case or camelCase.
- List the elements and modifiers as comma separated values, then press Generate Classes.
- Copy the class list, the CSS skeleton or the HTML snippet into your project.
Style rules used
- BEM: elements use two underscores (block__title), modifiers use two dashes (block--large or block__title--large).
- kebab-case: single dashes join every part (product-card-title-large).
- camelCase: the block stays lowercase and each later part is capitalized (productCardTitleLarge).
- Words are cleaned automatically: spaces and underscores become dashes, and any character that is not a letter, digit or dash is removed.
Frequently Asked Questions (FAQ)
What does the CSS Class Namer do?
It turns a block name plus your elements and modifiers into a consistent set of CSS class names, with a ready-to-use CSS skeleton and an HTML snippet.
Which naming styles are supported?
Three styles are supported: BEM, kebab-case and camelCase. You pick one and the generator follows its rules.
What is BEM?
BEM is a naming method for CSS classes. Block is the main component, element is a part of it written with two underscores, and modifier is a variation written with two dashes.
Is the CSS class namer free?
Yes, the tool is completely free to use with no signup.