Вёрстка независимыми блоками

,

Кажется, в крупных проектах рунета «БЭМ» становится стандартом де-факто.

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

Блок

Канонические имена блоков в БЭМ начинаются с префикса b- и отвечают на вопрос «Зачем нужен это блок?»:

.b-menu {}

Я в своей практике префикс всегда опускаю, так как лично для меня – это лишние символы не несущие никакой смысловой нагрузки.

.menu {}

Элемент

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


<nav class="menu">
    <h3 class="menu__head">Menu</h3>
    <ul class="menu__list">
        <li class="menu__item">Item 1</li>
        <li class="menu__item">Item 2</li>
        <li class="menu__item">Item 3</li>
    </ul>
</nav>

Селектор элементов именуем следующим образом: .имя-блока__имя-элемента.

Модификатор

Модификатор служит для изменения внешнего вида (возможно, и поведение) блока или элемента. Селектор записывается в виде: .имя-блока _тип-модификатора_значение-модификатора или .имя-блока __имя-элемента_тип-модификатора_значение-модификатора

Назначив тегу блока или элемента класс модификатора, можно изменить его внешний вид.


<nav class="menu menu_footer">
    <h3 class="menu__head">Menu</h3>
    <ul class="menu__list">
        <li class="menu__item">Item 1</li>
        <li class="menu__item menu__item_state_current">Item 2</li>
        <li class="menu__item">Item 3</li>
    </ul>
</nav>

Модификатор menu_footer у блока menu, например, меняет размер шрифта у меню в подвале страницы

.menu { font-size: 16px; }
.menu_footer { font-size: 12px; }

А модификатор menu__item_state_current у элемента menu__item может поменять цвет фона у текущего раздела


.menu__item { background: black; color: white; }
.menu__item_state_current { background: yellow; color: black; }

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

Дополнительные материалы