BEM Генератор
Створюйте перевірені назви BEM-класів і відповідні CSS-селектори з використанням затвердженого словника проєкту.
Створити BEM-селектор
Введіть блок і, за потреби, елемент, модифікатор та значення модифікатора.
Приклад: menu__item--active-primary
Правила назв BEM
Таблиця показує коректні й некоректні приклади за офіційним синтаксисом BEM; це не закритий словник назв.
| Категорія | Дозволені назви | Заборонені назви |
|---|---|---|
| Блоки | headercontainermenucheckboxinputopinions-boxblock2 | Headermenu itemкнопкаcard_namecard@ |
| Елементи | itemtitletext-inputview_moresubmititem2 | Titlemenu itemелементitem@ |
| Модифікатори | disabledhighlightedcheckedfixedsize-bigcolor_yellow | Activeis activeактивнийstate@ |
| Значення модифікаторів | smallbigblackredxmasprimary_2 | Big ValueVALUEвеликийred@ |