JS манипуляции над BEM CSS структурой

Question

Мне трудно получить это: структура БЭМ говорит, что я должен сделать что-то вроде этого:

.header
   .header__nav
      .header__icon
         .header__icon-text
      .header__menu
         .header__menu-list

Но что, если я хочу переключить некоторый класс CSS header__nav изменить остальные классы? Скажем, что-то вроде этого:

.header
   .header__nav .header__nav--active
      .header__icon
         .header__icon-text
      .header__menu
         .header__menu-list

Для вас должно быть очевидно, что я не хочу просто манипулировать родителем (.header__nav), но и его потомков, используя CSS только из соображений производительности. Но в структуре БЭМ кажется, что я должен переключать классы для каждого из дочерних элементов - это чепуха! Или мне нужно использовать определенное состояние (elem- active) для каждого из дочерних элементов И также мне нужно убедиться, что оно в правильной структуре в порядке CSS - чепуха еще раз!

Я действительно надеюсь, что я не понял это правильно, и на самом деле есть способ сделать это с точки зрения производительности - использование JS для переключения ОДНОГО класса для изменения остальных с помощью CSS.

Answer 1

Вы можете использовать вложенные селекторы для этого. См. https://en.bem.info/methodology/css/ для получения дополнительной информации.