ZetIndex_Ram
@ZetIndex_Ram

Вопрос про миксы БЭМ?

Приветствую. Не могу понять способ совмещать разные бэм-сущности на одном DOM-узле. Много раз перечитывая документация, я так и не понял как это делать и зачем это нужно.
Есть код в документации:
<!-- Блок `header` -->
<div class="header">
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div class="search-form header__search-form"></div>
</div>


Почему блоку search__form просто не добавить модификатор для изменения стилей? Зачем нужно создавать элемент?
  • Вопрос задан
  • 4493 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Блок - универсален и независим (в идеале). Он может располагаться в любом месте сайта без ущерба для собственного вида. Поэтому блокам не задаются стили, влияющие на позиционирование.
Элемент - неотъемлемая часть блока, не существующая вне его. Поэтому элементу можно задать позиционирование в пределах своего блока.
Микс решает проблему позиционирования блока. В данном случае нам нужно задать расположение блока поиска. Но блоку мы не можем задать width, left и т.п. Поэтому делаем этот же блок элементом другого (внешнего) блока и уже как элемент позиционируем.

Почему не модификатор? Потому что
Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение.

Позиционирование не относится ни к одному из этих вариантов.

Обо всем этом написано https://ru.bem.info/methodology/css/ в разделах "Модификаторы" и "Внешняя геометрия и позиционирование"

UPD
Пожалуй стоит дополнить, что все вышенаписанное, как должно быть понятно, относится именно к позиционированию. Если вы миксуете какие-то стили, которые "задают блокам внешний вид, состояние и поведение", то тут вполне возможно использование модификатора.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AppFA
@AppFA
Frontend developer at Yandex
Скорее всего search-form более универсальный блок - который используется много где, поэтому для него нет смысла создавать кучу модификаторов. В данном случае search-form используется так сказать в "контексте" header'a, поэтому в этом случае логично сделать микс чтобы добавить какие-то стили которые нужны только для формы в header'e. Но если у вас search-form используется в 1-2 местах, тогда возможно имеет смысл просто добавить модификатор для этого блока. Но думайте наперед немного, возможно он где-то потом ещё понадобится.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы