Правильно ли вместо модификаторора для блока использовать mix, если нет, то почемму?
Например у нас есть блок b-logo, мы хотим поместить его в шапку и сделать для него отступ слева и сверху на определенную позицию, можно сделать 2-мя способами:
1) Используя модификатор:
<div class="b-head">
<div class="b-logo b-logo_position_head"></div>
</div>
2) Используя mix:
<div class="b-head">
<div class="b-logo b-head__logo"></div>
</div>
Второй вариант мне кажется более логичным - есть в шапке елемент b-head__logo, который знает где ему надо находиться, а что отображать знает блок b-logo
Как я заметил, в основном все используют первый вариант.
Поправьте, если я мыслю не так, заранее спасибо!
Второй лучше.
В этом случае блок logo не несет в себе логики специфичной для блока head.
А где вы видели использование первого варианта?
Ну в основном советуют использовать модификаторы для изменения блока (в данном случае положения блока)
Можно использовать более полный вариант
b-head__logo будет отвечать за позиционирование и отступы, а b-logo_position_head конкретно за вид блока b-logo.
На самом деле всё сильно зависит от того, что еще есть внутри b-head и, что самое главное, может там появиться
Это очень холиварный вопрос)
Если кратко, то использовать модификатор обычно проще и надежнее, тогда как с миксами все не так просто. И, конечно, все от зависит от конкретной ситуации.
Какие могут быть сложности с миксами:
- могут возникнуть пересечения по отдельным CSS-свойствам, для устранения которых придется писать костыль или усложнять сущность, а именно этого мы пытались избежать миксом.
- один компонент интерфейса становится размазанным по нескольким независимым блокам. Понятно, что обычно это и так происходит, но на уровне CSS-правил это не так оправданно и не всегда никогда нельзя знать заранее что выносится - контекстаня зависимость или свойство блока.
- все равно нужно придумывать имя для элемента одной из сущностей
Плюс, миксовать "голые" блоки довольно опасно из-за их возможного усложнения в будущем, впрочем как и писать для них что-либо:)
Миксование отлично работает для устоявшихся блоков с модификаторами. В этом случае, используя готовые блоки, можно быстро собрать сложную композицию. Писать же сразу миксами, на ходу придумывая структуры сущностей, довольно самоуверенно)
Если вы хотите вырозить некую связь между блоками, то делать это лучше миксинами.
Модификаторы же следует использовать, если хотите сделать ещё одну вариацию блока, а когда какую модификацию включать решаете сами.
В случае с вашим примером явно прослеживается агрегация, где логотип является агрегатом, а шапка агрегатором. Поэтому второй вариант вам правильно кажется логичнее
Модификатором правильнее выразить, если логотип к примеру различается цветом или размером. Т.к. отличается он размером или цветом не потому что попал в шапку, а просто дизайнеры придумали такие вариации логотипа.
Добавлю свои 5 копеек.
Оба случая, естественно, возможны и никак не противоречат методологии.
Оба случая решают проблему — поэтому допустимо использовать любой из вариантов.
Но. Во-первых, в первом случае у вас один блок со всеми ограничениями, во-втором — два и их микс. Что это означает? Только то, что второй случай более гибкий, но и более сложный для сборки.
Все возможные проблемы здесь схожи с проблемами деления на классы и их наследование при разработке ООП приложения. Никто заранее вам не скажет, стоит ли выделять тот или иной класс в базовый, или наоборот. Все зависит от конкретного приложения. Если ваш блок логотипа (или его элемент) может нести в себе какую-то специфическую логику для отдельного приложения — то конечно второй вариант более правильный (вы просто миксуете локальный блок с доп. логикой с блоком logo из библиотеки), потому что вам не нужно будет делать хаки, если придется какую-то часть этой логики отключать. При отсутствии различий между приложениями, где используется этот блок, делить можно, но пользы это просто не принесет.
Поддержу. В любом случае голову нужно включать
Простое правило: блоки не должны что-либо знать друг про друга.
В верстке - это выражается в создании отдельных блоков для создания раскладки, в которую вы вставляете свои обычные компоненты интерфейса, в js - общением блоков друг с другом через каналы событий.
При малых масштабах проекта можно делать что угодно, но я думаю вам стоит попробовать оба подхода, чтобы оценить мощь БЭМа(2-й подход будет легче в поддержке, но сложнее в реализации).
Используя второй подход, вы задаете поведение именно элемента head__logo, тем самым оставляете логику специфичную для шапки в блоке шапки.
+ в будущем вы имеете возможность замены блока logo на любой другой блок с сохранением логики отображения в шапке.
Вот еще доклад про миксины http://events.yandex.ru/e
Мысли совпадают, как раз именно положение мне кажется надо делать миксом, а если меняется вид, то модификатор
Дело говоришь
Дело не в сложности, не боимся, а в правильности логики
Тут не совсем положение или внешний вид. Просто в конкретном примере внешний вид не зависит от других блоков, а положение зависит от блока head.
В каких-то других примерах всё может быть наоборот
Я про конкретный случай, абстрактно нельзя сказать как будет верно, а как нет
когда думаешь про блоки и лейауты, bemjson интуитивно хочется записывать как-то так:
но микс (mix) тут нельзя использовать, иначе получится всё задом-наперед:
Тоже на это наткнулся, решил менять сознание)
поле mix ожидает, что в него передадут массив бэм-сущностей, которые в bemjson имеют свойство восстанавливать опциональные поля из контекста.
т.е.
{block: 'b1',
content: {
block: 'b1',
elem: 'b2'
}
только потому эквивалентен
{block: 'b1',
content: {
elem: 'b2'
}
что мы можем из контекста понять о каком блоке речь.
и если воспринимать описание сущностей так, то (вроде) мозг не взрывает