EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

Часто задаваемые вопросы

Возникли вопросы по БЭМ? Мы поможем быстро найти ответы.

Почему БЭМ?

Блоки и элементы

Модификаторы и миксы

CSS

JavaScript

У меня другой вопрос

Если вы не нашли ответ на свой вопрос, свяжитесь с нами на форуме.

В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?

В чем разница между БЭМ и Web Components?

Поддержка браузеров

Инкапсуляция

Работа шаблонов

Вместо импорта HTML — сборка

Вместо Custom Elements — абстракция над DOM-деревом

Полезен ли БЭМ в маленьких проектах?

Методология БЭМ предоставляет правила организации веб-проектов, независимо от их размера или количества разработчиков в команде. Даже если в вашей команде два человека и вы верстаете одностраничные сайты, БЭМ позволяет:

В чем разница между БЭМ и Bootstrap?

Bootstrap — это свободный набор сверстанных блоков для создания сайтов и веб-приложений.

БЭМ — это методология, позволяющая:

Также существует ряд библиотек с открытым исходным кодом:

Когда создавать блок, когда — элемент?

Методология БЭМ не устанавливает строгих правил создания блоков и элементов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Выбирайте то, что подходит именно вам, учитывая рекомендации.

Как изменить внешний вид блока?

Внешний вид блока можно изменить при помощи модификаторов или миксов.

Используйте модификаторы

Если существует вероятность переиспользовать блок в данном оформлении.

Используйте миксы

Если блок имеет специфичное оформление только для данного окружения и не будет переиспользован на проекте.

Подробнее про применение миксов и модификаторов читайте в разделе Когда создавать модификатор, когда — микс?.

Зачем в именах модификаторов и элементов указывать имя блока?

Имя блока в именах модификаторов и элементов:

Зачем создавать отдельные директории и файлы для каждого блока и технологии?

Для удобства разработки и поддержки проекта файловую структуру БЭМ-проекта разделяют на вложенные директории и файлы.

Вы можете придерживаться рекомендуемой структуры проекта или использовать любую альтернативную:

Наследуют ли элементы блока его CSS-свойства?

Да. Механизм наследования CSS-свойств в БЭМ ничем не отличается от привычного наследования.

Чтобы одинаково оформить все элементы блока, целесообразно задать CSS-правила непосредственно блоку.

Чтобы оформить элементы по-разному, CSS-правила определяют непосредственно для каждого элемента. Возникших при этом повторов в результирующем коде можно избежать с помощью CSS-оптимизатора.

Почему не стоит создавать блоки-обертки?

Абстрактные обертки не имеют никакого смысла, так как задачи, которые они решают, реализуются с помощью миксов и дополнительных элементов блока.

Подробнее читайте в разделе HTML по БЭМ.

Почему не стоит создавать элементы элементов (block__elem1__elem2)?

Наличие элементов элементов ограничивает возможность изменять внутреннюю структуру блока. Элементы нельзя поменять местами, удалить или добавить без корректировки существующего кода.

Подробнее читайте в разделе Быстрый старт.

Когда создавать модификатор, когда — микс?

Создавайте модификатор

Если нужная вам реализация может использоваться повторно и не зависит от реализации других компонентов страницы. Например, блок select имеет модификаторы: hovered, pressed, disabled, focused, opened.

Модификаторы блока select

Создавайте микс

Если нужная вам реализация требуется только для данного окружения и в данном виде точно не будет переиспользована на проекте.

Например, в большинстве случаев создается микс, если:

Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?

Создавайте булевый модификатор

Если важно только наличие или отсутствие модификатора у блока, а его значение несущественно. Например, модификатор, описывающий состояние «отключен»: disabled.

Пример

<div class="button button_disabled">...</div>

Создавайте модификатор вида «ключ-значение»

Если состояний у блока может быть несколько. Например, для описания размеров блока можно использовать модификатор size с допустимыми значениями s, m и l.

Пример

<div class="button button_size_s">...</div>
<div class="button button_size_m">...</div>

Как выбрать имя модификатора?

Выбирайте имена модификаторов, опираясь на семантику, а не на описываемые им CSS-свойства.

Пример

<!-- Неудачное имя модификатора -->
<button class="button button_background_yellow">...</button>
<!-- Удачное имя модификатора -->
<button class="button button_view_action">...</button>

Имя модификатора button_background_yellow неудачное, потому что:

Как сделать глобальные модификаторы для блоков?

В БЭМ отсутствует понятие глобальных модификаторов, так как имя любого модификатора содержит имя блока или элемента.

Если требуется вынести CSS-свойство за пределы одного блока и применять его к разным БЭМ-сущностям в проекте, необходимо создавать отдельный блок, реализованный в технологии CSS. После чего совместить реализацию разных блоков с помощью миксов.

Подробнее читайте в разделе Стилизация групп блоков.

Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?

Элемент — составная часть блока, а не модификатора блока. Таким образом, только имя блока может задавать пространство имен для элементов.

Это важно, потому что:

Как адаптировать сайт к различным устройствам?

Существует несколько способов изменять разметку страницы на основе ширины окна браузера:

В обоих случаях необходимо определить контрольные точки (breakpoints), условия, при которых раскладка сайта меняется с одной на другую.

Media Queries

Файловая структура:

common.blocks/
    button/
        button.css    # CSS-реализация кнопки

CSS-реализация:

@media (max-width: 767px) {
    .button {
          left: 0;
    }
}

@media (max-width: 479px) {
    .button {
        right: 0;
    }
}

Примечание Имена блоков должны быть достаточно общими, для того чтобы его можно было использовать более чем с одной целью. Не стоит называть блок sidebar-left, если при изменении ширины экрана, его позиция изменится на right.

Переключение модификатора

Файловая структура:

common.blocks/
    button/
        _position/
            button_position_left.css
            button_position_right.css
        button.js                         # JS-реализация кнопки

button_position_left.css:

.button_position_left {
    left: 0;
}

button_position_right.css:

.button_position_right {
    right: 0;
}

Изменение CSS-классов на DOM-узле происходит при помощи JavaScript.

Подробнее читайте в разделе Переключение модификаторов.

Можно ли совмещать теги и классы в селекторе?

Совмещение тега и класса в селекторе повышает специфичность CSS-правил. Методология БЭМ не рекомендует совмещать теги и классы в селекторе.

Подробнее читайте в разделе Совмещение тега и класса в селекторе.

Можно ли использовать вложенные селекторы?

Вложенные селекторы увеличивают связанность кода и делают его повторное использование невозможным. Методология БЭМ допускает использование таких селекторов, но рекомендует свести их к минимуму.

Подробнее читайте в разделе Вложенные селекторы.

Можно ли использовать комбинированные селекторы?

Комбинированные селекторы имеют более высокую специфичность CSS-правил, чем одиночные. Успешность переопределения таких селекторов сильно привязана к порядку их объявления. Методология БЭМ не рекомендует использовать комбинированные селекторы.

Подробнее читайте в разделе Комбинированные селекторы.

Можно ли использовать селекторы по пользовательским тегам?

В HTML блоки могут выражаться с помощью пользовательских HTML-элементов (Custom Elements) с целью:

Методология БЭМ за улучшение семантики веб-страниц, но не рекомендует отказываться от селекторов по классам в пользу пользовательских тегов. В случае такой замены классы можно будет использовать только для модификаторов.

Пример

HTML-реализация:

<icon-twitter class="icon_social_twitter">...</icon-twitter>

CSS-реализация:

icon-twitter {}
.icon_social_twitter {}

В таком подходе существует ряд ограничений:

Почему не стоит делать общий сброс стилей (reset)?

На блоки не должны влиять CSS-правила, созданные для всей страницы. Это нарушает их независимость и затрудняет повторное использование.

Общий сброс стилей по сути реализуется с помощью глобальных CSS-правил, которые в большинстве случаев пишутся к селекторам на тег, что нежелательно делать в БЭМ-проекте.

Почему не стоит писать block_mod вместо block block_mod?

Если оставить только класс модификатора без указания класса самого блока/элемента, то все базовые CSS-свойства блока/элемента необходимо будет определить в модификаторе.

Модификатор определяет состояние блока/элемента, которое может быть изменено во время выполнения скрипта JavaScript. Таким образом, копировать базовые CSS-свойства блока придется во все его модификаторы.

Пример

<div class="button_size_m button_theme_islands button_type_submit">
    <div class="button__text">...</div>
</div>

Примечание. Совмещение нескольких модификаторов на одном и том же DOM-узле приведет к дублированию кода, реализующего базовую функциональность (логику и стили) блока.

В каких случаях следует создавать вспомогательные блоки?

Методология БЭМ не устанавливает строгих правил создания блоков-хелперов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Если такой блок необходим, то можно воспользоваться миксом.

Примером вспомогательного блока в bem-core может служить блок clearfix, а в bem-components — z-index-group.

Зачем внешнюю геометрию и позиционирование задавать через родительский блок?

Чтобы компонент оставался независимым, CSS-свойства, которые помешают его переиспользовать в другом окружении (например, margin и position), задают через родительский блок.

Подробнее читайте в разделе Внешняя геометрия и позиционирование

Зачем нужен i-bem.js, если есть jQuery?

i-bem.js не предназначен для замены фреймворка общего назначения, такого как jQuery.

i-bem.js позволяет: