1. Відкрийте генератор
На головній сторінці знайдіть форму створення BEM-селектора. Якщо потрібно, спочатку виберіть мову інтерфейсу.
2. Заповніть поля
| Поле | Що вводити | Обов’язково |
|---|---|---|
| Block | Назву компонента, наприклад menu. | Так |
| Element | Частину блока, наприклад item. | Ні |
| Modifier | Стан або варіант, наприклад active. | Ні |
| Modifier value | Значення модифікатора, наприклад primary. | Ні |
3. Отримайте результат
Натисніть кнопку створення BEM-назви. Якщо все заповнено правильно, генератор покаже клас і CSS-селектор.
menu__item--active-primary
.menu__item--active-primaryЯкщо в назві є недопустимі символи або значення модифікатора введено без самого модифікатора, генератор покаже повідомлення про помилку.
Корисні кнопки
- Очистити — очищає форму й результат.
- Показати приклад — показує короткий приклад; після відкриття кнопка змінюється на «Сховати приклад».
- Переглянути правила назв — переходить до таблиці з прикладами назв.
- Пошук — шукає збіг серед прикладів у таблиці назв.
Актуальність: зміст перевірено 27 вересня 2026 року для версії проєкту 1.0.1.