Как правильней сделать в рамках БЭМ?

Question

[Алексей Николаев]

Доброго дня.
Есть один и тот же блок, который необходимо стилизовать немножко иначе в зависимости от того, в каком месте он расположен - в сайдбаре или посреди контента. Как правильней сделать? Путем создания модификатора под каждый из вариантов (.block_type_sidebar и т.п.), или все-таки сделать стиль блока зависимым от другого блока (.selector .block)? В руководстве написано, что второй вариант возможен, но не рекомендуется, однако первый видится мне избыточным.

Заранее спасибо.

Answer 1

[i]

...стилизовать немножко иначе...

Это может означать очень разное, возможные варианты:

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

В общем если вариативность ограничена и требуется в разных местах уместнее реализовывать модификатором.
Применение миксов уместно на случай, когда надо совмещать реализации и их вариации.

Дополнительно:

• Зачем внешнюю геометрию и позиционирование задават...
  
• Внешняя геометрия и позиционирование
  

P.S. Добавьте к вариантам свой случай в комментарии, дополню ответ.

Comments

[Алексей Николаев]

Спасибо за подробный ответ! У меня как раз типографика и цвет - есть стандартный размер формы поиска, а есть вариант в сайдбаре, который отличается размерами текста, цветом и наличием рамки.

[FrogFog]

Ссылаясь на методологию блок не может обладать внешними маргинами или рамками. (с)
Вы имеете ввиду что нужно в блоке задавать подобные свойства, а модификатором перезаписывать их?
Это ведь не очень хорошо.

[i]

Блок должен оставаться не зависимым, таки что бы можно было его пометить в любуя часть разметки, поэтому его внешние поля надо звать в контексте его нахождения, например:

.foo__bar .block
{
    margin: 20px;
}
.foo__baz .block
{
    margin: 15px;
}

<div class="foo">
    <div class="foo__bar">
        <div class="block">b1</div>
    </div>
    <div class="foo__baz">
        <div class="block">b1</div>
    </div>
</div>

[i]

FrogFog, еще добавил ссылки

Answer 2

[Олег]

Правильней модификатором или миксом, на практике делайте так, как удобно лично вам.