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

Question

[Rooly]

Приветствую. Не могу понять способ совмещать разные бэм-сущности на одном DOM-узле. Много раз перечитывая документация, я так и не понял как это делать и зачем это нужно.
Есть код в документации:

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

Почему блоку search__form просто не добавить модификатор для изменения стилей? Зачем нужно создавать элемент?

Answer 1

[Сергей delphinpro]

Блок - универсален и независим (в идеале). Он может располагаться в любом месте сайта без ущерба для собственного вида. Поэтому блокам не задаются стили, влияющие на позиционирование.
Элемент - неотъемлемая часть блока, не существующая вне его. Поэтому элементу можно задать позиционирование в пределах своего блока.
Микс решает проблему позиционирования блока. В данном случае нам нужно задать расположение блока поиска. Но блоку мы не можем задать width, left и т.п. Поэтому делаем этот же блок элементом другого (внешнего) блока и уже как элемент позиционируем.

Почему не модификатор? Потому что

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

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

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

UPD
Пожалуй стоит дополнить, что все вышенаписанное, как должно быть понятно, относится именно к позиционированию. Если вы миксуете какие-то стили, которые "задают блокам внешний вид, состояние и поведение", то тут вполне возможно использование модификатора.

Comments

[Vasyl Kovbassa]

Вопрос, как на счет небольших внутренних изменений средствами родительского селектора помимо позиционирования. К примеру, в шапке есть кнопка и только в шапке текст кнопки написан в верхнем регистре. Все остальные кнопки используют обычный текст.

а. Задать uppercase через микс с родительским селекторм?
б. Микс из какой-то абстрактной bem сущностью - .upp?
c. Просто написать текст через капс. ?

[Сергей delphinpro]

Vasyl Kovbassa: я бы скорее выбрал вариант "a". Вариант "с" просто ужасен )

[Сергей delphinpro]

Хотя всё-таки нет. Лучше задать модификатор для блока. Это сейчас капсовая кнопка только одна. А в процессе эволюции проекта обязательно будут еще.

[Vasyl Kovbassa]

Хорошо а как на счет отдельной сущности без DOM реализации
.text-upp {
text-transform: uppercase;
}
к примеру,
которую миксовать со всеми элементами где требуется текс в верхнем регистре (кнопка, заголовок, еще что-то ...). Как тут https://ru.bem.info/methodology/css/#Стилизация-гр...
Или это не правильно использовать один микс для различных типов сущностей.

Answer 2

[Евгений]

Скорее всего search-form более универсальный блок - который используется много где, поэтому для него нет смысла создавать кучу модификаторов. В данном случае search-form используется так сказать в "контексте" header'a, поэтому в этом случае логично сделать микс чтобы добавить какие-то стили которые нужны только для формы в header'e. Но если у вас search-form используется в 1-2 местах, тогда возможно имеет смысл просто добавить модификатор для этого блока. Но думайте наперед немного, возможно он где-то потом ещё понадобится.