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

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

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

2. Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

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

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

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

   <!-- Блок `header` -->
   <div class="header">
       <!-- К блоку `search-form` примиксован элемент `search-form` блока `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>