Отличие микса от модификатора в данном примере BEM?

Question

[Vann Damm]

Есть меню, в хедере и в футере, в зависимости от того где оно находится нужен отступ от родителя 20px либо 40px. В обеих случаях это делают с помощью расширения общего(универсально) селектора класса. НО в чём отличие?

////////////////////////////////////////////////////////////////////////////////////////////////////////////

Answer 1

[Максим Морев]

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

С точки зрения чтения стилей есть разница в том, где вы описываете то, что хотите достичь - в первом случае (модификатор) изменения описываются в самом компоненте, во втором (микс) изменения описываются в родительском компоненте (header, footer).

В вашем случае следует использовать исключительно микс, использование модификатора будет являться ошибкой, так как:

• создание модификатора, который нужен только для использования внутри одного блока - ни к чему;
  
• изменять геометрию и позиционирование в модификаторе - плохо. Есть кейсы, когда в какой-то мере это допустимо, но не в этом случае.
  

А вообще меню - не очень показательный пример, лучше эту концепцию рассматривать на примере чего-то, что используется на сайте многократно - кнопки, например.

Answer 2

[Realetive]

Вариант с модификатором некорректен с точки зрения БЭМ — у блока не должно быть „«внешней» геометрии“, т. е. он не должен влиять на соседние блоки (автор картинки-примера не знает БЭМ). Внешние отступы — это «обязанность» элементов. Если у меню есть отступ слева и он зависит от того, где это меню находится, то это скорее всего выглядит так:

<header class="header">
  <div class="header__logo"><!-- … --></div>
  <div class="header__menu">
    <ul class="menu"><!-- … --></ul>
  </div>
</header>
<!-- … -->
<footer class="footer">
  <div class="footer__logo"><!-- … --></div>
  <div class="footer__menu">
    <ul class="menu"><!-- … --></ul>
  </div>
</footer>

.header__menu {
  margin-left: 20px;
}
.footer__menu {
  margin-left: 30px;
}

Comments

[Vann Damm]

спасибо за ответ , я так понимаю автор писал про это в данном пункте:

[Realetive]

Vann Damm, нет, это тоже ошибочное суждение — обёртки, если использовать БЭМ, тоже становятся не нужны: https://github.com/bem-site/bem-forum-content-ru/i...

Про БЭМ лучше читайте на официальном сайте: bem.info, а если будет что-то непонятно — у нас есть канал в Телеграме и форум.

[Vann Damm]

Realetive, спасибо