BEM Generator — простий генератор назв BEM-класів

BEM Generator — генератор BEM-класів і CSS-селекторів
BEM Generator допомагає створювати назви блоків, елементів і модифікаторів за методологією BEM. MIDITAUR, проєкт BEM Generator

BEM Generator — безкоштовний браузерний інструмент MIDITAUR для створення назв CSS-класів за принципами BEM. Він допомагає скласти назву з блока, елемента й модифікатора, перевіряє введені частини та одразу показує готовий CSS-селектор. Інструмент стане у пригоді тим, хто тільки знайомиться з HTML і CSS, а також учням, студентам, викладачам і всім, хто хоче швидко перевірити BEM-назву без ручного складання.

Що таке BEM

BEM — це підхід до організації інтерфейсів і назв CSS-класів. Назва походить від трьох понять:

  • Block — блок: самостійний компонент, наприклад menu, card або button;
  • Element — елемент: частина блока, наприклад menu__item;
  • Modifier — модифікатор: варіант або стан блока чи елемента, наприклад button--disabled.

Такі назви допомагають уже з CSS-класу зрозуміти, до якого компонента належить елемент і яку роль він виконує.

Наприклад: menu__item--active. Тут menu — блок, item — його елемент, а active — модифікатор.

BEM не вимагає одного-єдиного способу запису назв. У різних проєктах використовують кілька поширених схем. BEM Generator працює зі стилем, у якому елемент відділяється подвійним підкресленням __, а модифікатор — подвійним дефісом --.

Що вміє BEM Generator

У генераторі є чотири поля:

  • Блок — обов’язкова частина назви.
  • Елемент — частина блока. Його можна не вказувати.
  • Модифікатор — описує стан або різновид блока чи елемента.
  • Значення модифікатора — додаткова частина для випадків, коли одного слова недостатньо.

Генератор може створювати, зокрема, такі конструкції:

  • block
  • block__element
  • block--modifier
  • block--modifier-value
  • block__element--modifier
  • block__element--modifier-value

Одночасно він показує і назву класу, і готовий CSS-селектор.

Наприклад, якщо ввести: блок — menuелемент — itemмодифікатор — activeзначення — primary

результатом буде: menu__item--active-primary, а CSS-селектор матиме вигляд: .menu__item--active-primary

Генератор перевіряє введені назви

Інструмент не просто з’єднує текст із кількох полів. Перед створенням результату він перевіряє допустимі символи.

Для назви блока можна використовувати: малі латинські літери, цифри, дефіс -.

Приклади: menu,main-menu,block2

Для елементів, модифікаторів і їхніх значень генератор також допускає символ підкреслення _.

Наприклад: view_more, color_yellow, primary_2

Великі літери, пробіли, кирилиця та сторонні спеціальні символи перевірку не проходять.

Наприклад, MainMenu, menu item, кнопка або card@ не будуть прийняті.

Важливо: правильний синтаксис ще не означає вдалу назву. Назва має бути зрозумілою людині й описувати роль компонента. Генератор може перевірити форму запису, але не може вирішити за розробника, чи добре названий конкретний елемент.

Для тих, хто тільки вивчає HTML і CSS

На початку роботи з CSS легко заплутатися в назвах класів. Наприклад, у невеликому проєкті можуть з’явитися такі класи: title1,big-button,green,left-box,new-item

Спочатку все виглядає зрозуміло, але зі збільшенням сайту стає дедалі важче пам’ятати, де і для чого використовується кожна назва. BEM пропонує дивитися на сторінку як на набір компонентів.

Картка може бути блоком: card, її заголовок — елементом: card__title, зображення — ще одним елементом: card__image,а виділений варіант картки — модифікатором: card--featured.

BEM Generator допомагає побачити цю структуру на простих прикладах і перевірити себе під час вправ.

Для школярів

Генератор можна використовувати після знайомства з HTML, CSS-класами та базовими стилями. Наприклад, під час вправи можна взяти звичайну вебсторінку й спробувати визначити:

  • де на ній самостійні блоки;
  • які частини є елементами цих блоків;
  • які компоненти мають різні стани або варіанти.

Після цього назви можна перевірити в генераторі й використати у власному HTML та CSS. Такий підхід допомагає не просто запам’ятати символи __ і --, а зрозуміти логіку структури сторінки.

Для студентів

BEM Generator можна використовувати під час практичних і лабораторних робіт із вивчення:

  • HTML;
  • CSS;
  • frontend-розробки;
  • компонентного підходу;
  • організації стилів;
  • командної роботи над вебпроєктом.

Особливо корисно порівнювати кілька можливих назв і пояснювати, чому одна з них краще передає призначення компонента.

Для викладачів

Інструмент підходить для коротких демонстрацій на заняттях. Наприклад, викладач може показати компонент card і разом із групою визначити:

card__title

card__image

card__description

card__button

card--featured

Після цього учні або студенти можуть самостійно побудувати BEM-структуру іншого компонента: меню, форми, галереї, повідомлення або панелі навігації.

BEM Generator можна використовувати і для взаємоперевірки робіт: один учасник пропонує структуру класів, а інший пояснює, чи зрозуміло з назв, як побудований компонент.

Для дорослих початківців

Якщо ви самостійно вивчаєте веброзробку або проходите курси, генератор може бути невеликим довідковим інструментом під час практики.

Не потрібно встановлювати окрему програму, запускати сервер або налаштовувати середовище розробки.

Достатньо відкрити сторінку у браузері, ввести потрібні частини назви й перевірити результат.

Водночас найкраще використовувати генератор разом із реальним HTML і CSS. Саме робота з власними компонентами допомагає зрозуміти, навіщо потрібен BEM.

Що ще є в проєкті

BEM Generator має вбудовану таблицю з прикладами допустимих і недопустимих назв. У ній можна швидко подивитися приклади для:

  • блоків;
  • елементів;
  • модифікаторів;
  • значень модифікаторів.

Є також пошук по прикладах і окрема довідкова система. Довідка містить:

  • пояснення можливостей генератора;
  • інструкцію з використання;
  • матеріали для навчання;
  • опис мовних версій;
  • інформацію про будову проєкту.

Три мови інтерфейсу

BEM Generator доступний:

  • українською;
  • англійською;
  • німецькою.

Мову можна змінити без переходу до іншого інструмента. Це зручно як для самостійного навчання, так і для занять у групах, де учасники користуються різними мовами.

Працює без складної серверної частини

BEM Generator — статичний браузерний застосунок, побудований на HTML, CSS і JavaScript. Генерування та перевірка назв відбуваються безпосередньо у браузері користувача. Для основної роботи інструменту не потрібен обліковий запис або окрема серверна система. На сторінках проєкту також зазначено, що сайт не використовує файли cookie.

Увага до доступності

В інтерфейсі передбачені базові засоби для зручнішої роботи з клавіатурою та допоміжними технологіями.

Зокрема:

  • є швидкий перехід до основного вмісту;
  • поля форми мають текстові підписи;
  • повідомлення про результат можуть бути прочитані програмами читання з екрана;
  • стан мобільного меню передається через атрибути доступності;
  • під час роботи з клавіатурою видно поточний фокус;
  • враховується системне налаштування зменшення анімації.

Автоматична перевірка доступності допомагає знаходити технічні проблеми, але не замінює ручне тестування.

Чого BEM Generator не робить

Генератор не створює HTML-компоненти й не пише CSS замість користувача. Він також не визначає, чи правильно ви поділили інтерфейс на блоки й елементи. Його завдання простіше: допомогти скласти та перевірити назву.

Тому інструмент краще сприймати не як «автоматичний BEM для всього проєкту», а як невеликий практичний помічник для навчання й повсякденної роботи.

Приклад невеликого компонента

Уявімо картку товару.

Блок: product-card

Елементи: product-card__image

product-card__title

product-card__price

product-card__button

Модифікований варіант:

product-card--featured

Такі назви можна одразу використати в HTML:

<article class="product-card product-card--featured">
  <img class="product-card__image" src="photo.jpg" alt="">
  <h2 class="product-card__title">Назва товару</h2>
  <p class="product-card__price">500 грн</p>
  <button class="product-card__button">Купити</button>
</article>

а потім оформити в CSS:

.product-card {
  /* стилі картки */
}

.product-card__title {
  /* стилі заголовка */
}

.product-card--featured {
  /* стилі виділеної картки */
}

Генератор не створює цей код автоматично, але допомагає правильно й послідовно сформувати назви класів для нього.

Як почати

  1. Введіть назву блока.
  2. За потреби додайте елемент.
  3. Додайте модифікатор, якщо потрібно описати стан або варіант.
  4. За потреби вкажіть його значення.
  5. Натисніть кнопку генерації.
  6. Скопіюйте отриману назву класу або CSS-селектор у свій проєкт.

Якщо назва містить недопустимі символи або значення модифікатора введене без самого модифікатора, генератор повідомить про помилку.

BEM Generator як навчальний інструмент

Головна користь BEM Generator не в тому, щоб заощадити кілька секунд на введенні символів.

Він допомагає звикнути до структурованого підходу: бачити не просто окремі HTML-теги, а компоненти, їхні частини та варіанти.

Це навичка, яка стає особливо корисною, коли навчальна сторінка поступово перетворюється на більший вебпроєкт.

BEM Generator можна використовувати на уроках, практичних заняттях, курсах або під час самостійного вивчення HTML і CSS.

Про проєкт

Назва: BEM Generator

Тип: браузерний інструмент для роботи з BEM-назвами

Версія: 1.0.1

Технології: HTML, CSS, JavaScript

Мови інтерфейсу: українська, англійська, німецька

Призначення: створення й перевірка BEM-класів та відповідних CSS-селекторів

Автор: Юрій Чернієвський

Проєкт: MIDITAUR

Відкрити BEM Generator