БЭМ: блоки

БЭМ расшифровывается как «блок, элемент, модификатор». Методологию придумали в Яндексе, и сегодня она — одна из самых популярных в мире. Интерфейс в БЭМ собирают из трёх видов сущностей, и начинается всё с блоков.

Три сущности

В этом уроке — только блоки. Элементам и модификаторам посвящены следующие уроки.

Что такое блок

Блок — независимая часть интерфейса, которую можно перенести в другое место страницы или на другой сайт, и она будет работать. Кнопка, поле поиска, меню, карточка товара — всё это блоки:

<style>
  .button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: seagreen;
    color: white;
  }
</style>
 
<button class="button">Купить</button>

Блок оформлен одним классом .button. Такую кнопку можно поставить в шапку, в форму или в карточку — выглядеть она будет одинаково.

Имя блока

Имя блока отвечает на вопрос «что это?», а не «как выглядит?». Пишут его строчными латинскими буквами, слова разделяют дефисом:

Блок не знает, где стоит

Блок отвечает за свой внешний вид, но не за положение на странице. Внешние отступы, position и ширину в раскладке задаёт тот, кто блок использует:

<style>
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: gold;
    font-size: 13px;
  }
</style>
 
<p>Новинка <span class="badge">новое</span></p>
<p><span class="badge">−20%</span> Скидка на всё</p>

У .badge нет margin — поэтому метка одинаково хорошо смотрится и после текста, и перед ним.

Блоки внутри блоков

Блоки свободно вкладываются друг в друга: в карточке может стоять кнопка, в шапке — меню и поиск. При этом каждый блок остаётся самостоятельным и не меняет стили соседа:

<style>
  .card { padding: 12px; border: 1px solid silver; border-radius: 8px; max-width: 220px; }
  .button { padding: 6px 12px; border: none; border-radius: 6px; background: seagreen; color: white; }
</style>
 
<div class="card">
  <p>Рюкзак, 40 €</p>
  <button class="button">Купить</button>
</div>

Карточка ничего не знает о кнопке, а кнопка — о карточке. Их можно менять по отдельности.

Частая ошибка

Задавать блоку внешние отступы «под конкретное место»:

<style>
  .button { margin-left: 40px; padding: 6px 12px; border: none; background: seagreen; color: white; }
</style>
 
<button class="button">В шапке всё ровно</button>
<p><button class="button">А здесь кнопка уехала</button></p>

Отступ, нужный в одном месте, ломает все остальные. Положение блока задают через родителя — как именно, покажет урок о миксах.