BEM Generator
Create validated BEM class names and matching CSS selectors using the approved project vocabulary.
Generate a BEM selector
Enter a block and, when needed, an element, modifier and modifier value.
Example: menu__item--active-primary
BEM naming rules
The table shows valid and invalid examples based on the official BEM naming syntax; it is not a closed vocabulary.
| Category | Allowed names | Forbidden names |
|---|---|---|
| Blocks | headercontainermenucheckboxinputopinions-boxblock2 | Headermenu itemкнопкаcard_namecard@ |
| Elements | itemtitletext-inputview_moresubmititem2 | Titlemenu itemелементitem@ |
| Modifiers | disabledhighlightedcheckedfixedsize-bigcolor_yellow | Activeis activeактивнийstate@ |
| Modifier values | smallbigblackredxmasprimary_2 | Big ValueVALUEвеликийred@ |