Переопределение стилей в миксах BEM?

Question

[IIIu6ko]

Как использовать миксы в BEM?

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

<header class="header">
  <div class="logo">
    <img class="logo__img" src="path..." alt="logo" width="50" height="25">
  </div>
</header>

<footer class="footer">
  <div class="logo footer__logo">
    <img class="logo__img" src="path..." alt="logo" width="50" height="25">
  </div>
</footer>

.footer {
  &__logo {
    margin: 20px;
  }
}

.logo {
  margin: 10px;
}

То есть, у меня банально стили не переопределяться.
Может я что-то не понимаю? Объясните пожалуйста.

Comments

[Keda37]

А отступ по логике не должен случаем быть отступом элемента header__logo?
а на блока лого?
или у футера тогда отступ по логике должен менятся не у footer__logo, а например у logo--footer, т.е. модификатор блока лого, а у вас пока тут что-то намешано

[IIIu6ko]

Keda37, Задавать модификатор для отступа - неправильно.

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

На счёт header__logo согласен, но это я сделал специально, чтобы показать пример.
Получается для блоков лучше не задавать стили для позиционирования?

Миксы, судя по названию миксуют стили, но что делать с переопределением?
Если у меня в блоке всё-таки прописаны отступы, то как их переопределить, только модификатор писать?

[Keda37]

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

а это наверное наш случай)

Answer 1

[Олег]

1. У блока не должно быть margin'a в принципе
2. Нужно использовать два микса: .header__logo и .footer__logo
3. Для нормального переопределения используйте сборки для БЭМ'a

Comments

[IIIu6ko]

Сборки для бэма? Что за сборки и как они помогут переопределить стили?
Меня интересует именно как это работает.

[Олег]

IIIu6ko, Стек яндекса, если сложно, можно посмотреть мою, там обычный gulp. Принцип прост - стили собираются так, чтобы учесть все зависимости.

[IIIu6ko]

Олег, Спасибо, щас попробую поковырять твой gulpfile.

Я тоже использую gulp для сборки, но у меня он без разбора берёт все файлы стилей подряд из всех блоков и склеивает в один. Поэтому с переопределением полный рандом.