БЭМ помогает держать CSS в порядке, но только если классы названы по правилам. Один menu__item__link — и структура ломается: элемент не может быть частью другого элемента. Модификатор без основного класса — и стили не применяются. Опечатка в разделителе — и класс не работает. Валидатор БЭМ проверяет, правильно ли названы и вложены блоки, элементы и модификаторы, находит типовые ошибки и показывает структуру блоков. Поддерживаются классическая схема и схема «два дефиса», а всё выполняется в браузере.
В этой статье разберём, какие ошибки находит валидатор, почему «элемент элемента» — ошибка, что такое микс и как указать служебные классы, которые не нужно проверять.
Что умеет валидатор
Валидатор БЭМ принимает HTML-разметку и проверяет классы по методологии БЭМ.
| Параметр | Что делает |
|---|---|
| HTML-разметка | Фрагмент или страница целиком |
| Схема именования | Классическая: блок__элемент_модификатор_значение или «два дефиса»: блок__элемент--модификатор--значение |
| Префиксы служебных классов | Классы, которые не нужно проверять: js-, is-, has- и другие |
| Проверить | Запускает проверку |
Скрипты не выполняются, ресурсы не загружаются — проверяется только разметка и классы.
Всё выполняется в браузере: введённые данные никуда не отправляются.
Какие ошибки находит валидатор
Инструмент ищет типовые нарушения БЭМ.
| Ошибка | Пример | Почему это ошибка |
|---|---|---|
| Элемент вне своего блока | header__note без родителя header |
Элемент должен быть внутри своего блока |
| «Элемент элемента» | menu__item__link |
Элемент — часть блока, а не другого элемента |
| Модификатор без основного класса | button_primary без button |
Модификатор дополняет блок, но не заменяет его |
| Конфликтующие значения модификаторов | menu_size_s menu_size_m |
Один модификатор не может иметь два значения одновременно |
| Опечатки в разделителях | menu-item вместо menu__item |
Разделители несут смысл: __ для элемента, _ или -- для модификатора |
Кроме ошибок, валидатор показывает структуру блоков — удобно, чтобы увидеть, какие элементы к какому блоку относятся.
Почему «элемент элемента» — ошибка
Это самое частое непонимание. В БЭМ элемент — часть блока, а не другого элемента.
| Неправильно | Правильно | Почему |
|---|---|---|
menu__item__link |
menu__link |
Вложенность задаёт разметка, а не имя класса |
card__header__title |
card__title |
Элемент не может быть вложен в элемент по имени |
block__elem__sub |
block__sub |
То же правило |
Вложенность в БЭМ определяется разметкой, а не именем класса. Если ссылка находится внутри элемента menu__item, это не значит, что её класс должен быть menu__item__link. Достаточно menu__link — он всё равно элемент блока menu.
Микс: блок и элемент на одном узле
БЭМ разрешает микс — когда на одном узле есть элемент одного блока и самостоятельный блок.
| Пример | Что означает |
|---|---|
header__logo logo |
Элемент шапки и самостоятельный блок logo |
menu__item button |
Элемент меню и самостоятельный блок button |
Валидатор не считает это ошибкой. Предупреждение выдаётся только когда на узле элемент и его же собственный блок — это уже конфликт.
Классическая схема и «два дефиса»
В проектах приняты разные схемы именования. Валидатор поддерживает две.
| Схема | Пример |
|---|---|
| Классическая | блок__элемент_модификатор_значение |
| Два дефиса | блок__элемент--модификатор--значение |
Классическая схема использует одно подчёркивание для модификатора и значения. Схема «два дефиса» — двойной дефис. Выберите ту, что принята в проекте, — иначе валидатор будет ругаться на правильные классы.
Служебные классы и префиксы
Не все классы в HTML — сущности БЭМ. Некоторые служебные: js- для JavaScript-хуков, is- и has- для состояний, u- для утилит.
Валидатор позволяет указать префиксы служебных классов, которые проверять не нужно. Например: js-, is-, has-, u-.
| Префикс | Назначение |
|---|---|
js- |
Хуки для JavaScript, не для стилей |
is- |
Состояния: is-active, is-open |
has- |
Состояния наличия: has-error |
u- |
Утилитарные классы |
Без этого списка валидатор будет считать такие классы ошибками, хотя они не относятся к БЭМ.
Зачем проверять БЭМ
| Задача | Что даёт валидатор |
|---|---|
| Рефакторинг | Найти ошибки в существующей разметке |
| Код-ревью | Проверить, что новые классы соответствуют методологии |
| Обучение | Увидеть, какие конструкции нарушают БЭМ |
| Структура | Понять, какие элементы к какому блоку относятся |
| Единообразие | Держать именование в проекте consistent |
| Миграция | Проверить разметку при переходе на БЭМ |
Ограничения валидатора
- Только классы в HTML. Стили и их качество не проверяются.
- Не заменяет HTML-валидатор. Ошибки разметки — отдельная задача.
- Схема должна совпадать с проектом. Если схема выбрана неверно, правильные классы будут считаться ошибками.
- Служебные классы нужно указать. Иначе они попадут в ошибки.
Как пользоваться: пошагово
- Вставьте HTML-разметку.
- Выберите схему именования, которая принята в проекте.
- Укажите префиксы служебных классов, которые проверять не нужно, и нажмите «Проверить».
Типичные ошибки
- Писать «элемент элемента».
menu__item__link— ошибка. Правильно —menu__link: вложенность задаёт разметка. - Оставлять модификатор без основного класса.
button_primaryбезbuttonне сработает: модификатор дополняет блок, а не заменяет его. - Смешивать два значения одного модификатора.
menu_size_s menu_size_m— конфликт. Один модификатор — одно значение. - Путать разделители.
__— для элемента,_или--— для модификатора. Опечатка ломает класс. - Забывать про служебные классы.
js-,is-,has-— не БЭМ. Укажите их в префиксах, иначе валидатор будет ругаться. - Выбирать не ту схему. Если проект использует «два дефиса», а выбрана классическая, правильные классы будут ошибками.
Вопросы и ответы
Почему элемент элемента — ошибка?
В БЭМ элемент — часть блока, а не другого элемента. Вместо menu__item__link пишут menu__link: вложенность задаёт разметка, а не имя класса.
Можно ли смешивать блок и элемент на одном узле?
Да, это называется миксом: например, header__logo logo — элемент шапки и самостоятельный блок logo. Предупреждение выдаётся только когда на узле элемент и его же собственный блок.
Проверяет ли валидатор CSS?
Нет, только классы в HTML. Для стилей есть отдельный CSS-валидатор.
Чем классическая схема отличается от «двух дефисов»?
Классическая использует _ для модификатора и значения, «два дефиса» — --. Выберите ту, что принята в проекте.
Что такое служебные классы?
Классы не из БЭМ: js- для скриптов, is- и has- для состояний, u- для утилит. Их можно исключить из проверки по префиксу.
Показывает ли валидатор структуру блоков?
Да, кроме ошибок он показывает структуру: какие элементы к какому блоку относятся.
Итог
Валидатор БЭМ — инструмент для проверки классов HTML по методологии БЭМ. Он находит элементы вне блоков, «элементы элементов», модификаторы без основного класса, конфликты значений и опечатки в разделителях, поддерживает классическую схему и «два дефиса», а также позволяет исключить служебные классы по префиксу. Всё выполняется в браузере. Выбирайте схему проекта, указывайте служебные префиксы и исправляйте найденные ошибки — и разметка будет соответствовать БЭМ, а стили — предсказуемыми.*