Учням
Щоб навчитися давати зрозумілі назви CSS-класам і бачити вебсторінку як набір компонентів.
Як генератор може допомогти в навчанні
Учень або студент вводить частини BEM-назви й одразу бачить результат. Так легше зрозуміти, як пов’язані блок, елемент і модифікатор та як із них утворюється CSS-клас.
Генератор варто використовувати разом із практикою HTML і CSS. Він допомагає перевірити назву, але не замінює пояснення викладача, роботу з кодом і власні навчальні проєкти.
Кому він може бути корисний
Студентам
Для практичних робіт з HTML, CSS, веброзробки та організації стилів.
Викладачам
Для коротких вправ, демонстрацій і перевірки синтаксису BEM-назв під час заняття.
Тим, хто навчається самостійно
Щоб закріпити BEM після знайомства з базовими HTML і CSS.
Орієнтовний вік і рівень підготовки
Наведені межі — лише практичний орієнтир. Вони не є офіційною віковою оцінкою або педагогічною сертифікацією. Важливіше те, чи людина вже знайома з основами HTML і CSS.
| Вік / рівень | Як працювати | Що вивчати |
|---|---|---|
| 12–14 років | Разом із викладачем після знайомства з HTML і простим CSS. | CSS-класи, блоки, елементи, прості компоненти. |
| 15–17 років | Самостійні вправи та невеликі навчальні проєкти. | BEM, модифікатори, адаптивні компоненти, спільні правила назв. |
| 17+ / коледж і університет | Практичні та лабораторні роботи, навчальні проєкти, перевірка коду одне одного. | Організація CSS, компоненти, стандарти коду, підтримуваність. |
| Дорослі початківці | Самонавчання, курси, перекваліфікація. | Основи веброзробки, BEM і правила спільної роботи з CSS. |
Де можна використовувати
- на уроках інформатики та вебтехнологій;
- у STEM та IT-гуртках;
- у коледжах і закладах професійної освіти;
- на університетських курсах із веброзробки;
- на звичайних та інтенсивних курсах з HTML, CSS і веброзробки;
- під час самостійного навчання.
Ідеї для вправ
- Знайдіть на макеті блоки, елементи та стани й придумайте для них BEM-назви.
- Порівняйте правильні та неправильні назви й поясніть помилку.
- Перейменуйте неструктуровані CSS-класи невеликої сторінки за правилами BEM.
- Створіть компонент
card, додайте елементи й модифікатори, а потім напишіть для нього HTML і CSS. - Обміняйтеся рішеннями з одногрупником або однокласником і поясніть, чому ви вибрали саме такі назви.
Що має вміти учень або студент після практики
Розрізняти блок, елемент і модифікатор; складати синтаксично правильні BEM-назви; пов’язувати клас із CSS-селектором; пояснювати свій вибір назви та однаково застосовувати правила в невеликому проєкті.
Важливо оцінювати не лише те, чи пройшла назва перевірку. Назва має ще й зрозуміло описувати роль компонента.
Що можна додати в майбутньому
- навчальні вправи від простих до складніших;
- пояснення конкретної помилки після невдалої перевірки;
- готові набори завдань для викладача;
- вправи на побудову BEM за готовим компонентом;
- збереження результатів для навчального портфоліо або LMS.
Корисні матеріали для викладача
MDN Curriculum допомагає побачити, які знання входять до базової підготовки фронтенд-розробника. Також можна використати MDN Resources for Educators і офіційні правила BEM — Naming.
Актуальність: зміст перевірено 27 вересня 2026 року для версії проєкту 1.0.1.