Вопросы по верстке - по БЭМ

469

20 марта 2017, 08:37

Привет.

Вопросы по верстке по БЭМ.

Написано в документации, что "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование." Как же тогда задавать те же паддинги, маргины...?
Зачем нужен микс. Не понимаю. Есть блок, есть модификатор. Зачем еще микс? Приведите, пожалуйста, пример понятный.

Answer 1

Идея в том, чтобы блок можно было повторно использовать в любом другом месте на странице (или даже на другом проекте).

Если известно, что независимо от того, где данный блок потребуется, он будет иметь одинаковую высоту, ширину и рамку, то width, height и border можно смело оставлять. А вот margin, position и float с большой долей вероятности будет плохой идеей — нет гарантий, что в другом месте блок по-прежнему будет требовать таких же отступов и позиционирования. Разумеется бывают исключения, универсальное правило — руководствоваться здравым смыслом.
Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:
- Совмещать поведение и стили нескольких сущностей без дублирования кода;
- Создавать семантически новые компоненты интерфейса на основе имеющихся.
Пример микса:
```

<div class="header">
    
    <div class="search-form header__search-form"></div>
</div>
```
В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.

Простейшая реализация:

/* 
Вообразим что это прекрасный блок формы 
Он может быть переиспользован в другом месте, но вид у него дефолтно такой 
*/ 
.search-form{ 
  display: inline-block; 
  cursor: pointer; 
  background: rgba(0,149,255,1); 
  color: #00ff5c; 
  padding: 10px 30px; 
} 
 
/* 
Вообразим что это прекрасный блок шапки 
Он знать ничего не знает о других блоках, однако, его элементы должны приводить содержимое в нужную форму 
*/ 
.header{ 
  color: blue; 
} 
 
/* 
Элемент формы шапки 
Он не знает про блок формы, но знает что в шапке у формы должен быть margin от текста ниже формы 
И плавная смена цвета при наведении 
*/ 
.header__search-form{ 
  margin-bottom: 10px; 
  transition: all .5s; 
} 
.header__search-form:hover{ 
  background: #0e13b5; 
}

<!-- Блок `header` --> 
<div class="header"> 
  <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`--> 
  <div class="search-form header__search-form">Форма</div> 
  <div>Это шапка</div> 
</div>