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

485
20 марта 2017, 08:37

Привет.

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

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

  2. Зачем нужен микс. Не понимаю. Есть блок, есть модификатор. Зачем еще микс? Приведите, пожалуйста, пример понятный.

Answer 1
  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>

READ ALSO
Выборка данных из нескольких таблиц

Выборка данных из нескольких таблиц

Есть такая структура базы:

286
PDO с ssl. Ошибка SQLSTATE[HY000] [2002] без описания

PDO с ssl. Ошибка SQLSTATE[HY000] [2002] без описания

Доброго времени года! При попытке установить соединение с удалённым сервером через PDO с SSL вот так

274
Как получить из строки последнее слово?

Как получить из строки последнее слово?

Пример строки Пример пример №1 300986190Как получить только последние цифры? Нужно получить только последние цифры даже если будет такая срока...

315
Как перейти из фрагмента в navigation?

Как перейти из фрагмента в navigation?

Я создал NavigationDrawer и в этом активити создал 10 фрагментовТОбишь когда нажимаешь на пункт меню из Navigation то создается тот или иной фрагмент

356