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.