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

#css #вёрстка #бэм

Привет.

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


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

    

Ответы

Ответ 1

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

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

Миксы позволяют:


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


Пример микса:



    
    




В данном примере мы совместили поведение и стили блока 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;
}


  
  
Форма
  
Это шапка