Инструменты разработчика

Валидатор БЭМ

Проверьте, правильно ли названы и вложены блоки, элементы и модификаторы. Валидатор найдёт элементы вне своих блоков, «элементы элементов», модификаторы без основного класса, конфликтующие значения модификаторов и опечатки в разделителях, а также покажет структуру блоков. Поддерживаются классическая схема и схема «два дефиса». Всё выполняется в браузере.

HTML-разметка

<header class="header header_theme_dark">
  <a class="header__logo logo" href="/">Логотип</a>
  <nav class="menu menu_size_s menu_size_m">
    <a class="menu__item menu__item_active" href="/">Главная</a>
    <a class="menu__item__link" href="/about">О нас</a>
  </nav>
  <button class="button_primary">Войти</button>
</header>
<p class="header__note">Элемент вне блока</p>

Вставьте фрагмент или страницу целиком. Скрипты не выполняются, ресурсы не загружаются.

Схема именования

Не проверять классы с префиксами

Через запятую, например js-, is-, has-, u-. Такие классы — служебные, а не сущности БЭМ.

Для работы инструмента включите JavaScript в браузере.

Инструмент работает в вашем браузере: введённые данные никуда не отправляются.

Как пользоваться

Вставьте HTML-разметку.
Выберите схему именования, которая принята в проекте.
Укажите префиксы служебных классов, которые проверять не нужно, и нажмите «Проверить».

Вопросы и ответы

Почему элемент элемента — ошибка?

В БЭМ элемент — часть блока, а не другого элемента. Вместо menu__item__link пишут menu__link: вложенность задаёт разметка, а не имя класса.

Можно ли смешивать блок и элемент на одном узле?

Да, это называется миксом: например, «header__logo logo» — элемент шапки и самостоятельный блок «logo». Предупреждение выдаётся только когда на узле элемент и его же собственный блок.

Проверяет ли валидатор CSS?

Нет, только классы в HTML. Для стилей есть отдельный CSS-валидатор.

Рабочая область

Как пользоваться

Вопросы и ответы