Стили элементов блока меняются от расположения блока. Как лучше реализовать?

Question

[Alex_Titov]

Один БЭМ-блок используется на странице несколько раз. Со стилями самого блока нет проблем. Но вот его элементы ведут себя по разному, в зависимости от расположения блока. Например, одно и тоже меню в шапке и в подвале. Стили самого меню одинаковые, а отступы между пунктами меню разные. Как вы решаете такую проблему? Через вложенность, через модификаторы или как-то ещё.

Comments

[Сергей delphinpro]

отступы между пунктами меню разные

justify-content: space-between;
пункты распределятся равномерно. останется только отрегулировать общую ширину меню. Но это уже задача элементов шапки и подвала.

Ну а в общем случае отвечая на вопрос: в БЭМ не должно быть вложенности, если эта вложенность будет между элементами разных блоков. Т.е. не стоит писать что-то вроде

.header .menu__item {}
.footer .menu__item {}

Для этого есть модификаторы

.menu__item_size_normal {}
.menu__item_size_small {}

Если речь идет о вложенности между элементами одного блока, то можно и так (но стоит избегать этого по возможности)

.menu__item {}
.menu_size_small .menu__item {}

[Сергей delphinpro]

Поясню мысль:

но стоит избегать этого по возможности

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

В некоторых случаях грань между этими двумя вариантами очень тонкая, смотрите по ситуации.

[Alex_Titov]

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