Применение изменений состояния, которые применяются ко многим элементам в блоке

Question

Мне очень нравится BEM, и я обычно использую вариант BEM, где я использую классы состояний для включения/выключения подпозиций, что приводит к легкому пониманию правил в моем SASS нравится:

.my-block{ 
    &__element { 
    color : blue; 

    // I prefer state-classes over modifiers for state 
    &.is-selected { color : red; } 

    &--small { height: 50%; } 
    } 
} 

проблема Интересно, как решить наиболее BEM-иш образом, как бороться с изменением состояния в моей JavaScript, которые должны применяться к большому количеству элементов в блоке. Например, скажем, у меня есть компонент, который должен скрывать или показывать разные элементы в зависимости от того, находитесь ли вы в step1, step2 или step3 процесса.

Биты BEM достаточно просты, если я должен просто применять классы состояний к каждому из элементов, но это только проблема. Если у меня есть 10 элементов, где 7 должны быть скрытыми на шаге 2, то это 7x столько Javascript, чтобы добавить, как будто я только что добавили правила на не столь BEM-чистом виде

&__element { 
    display: none; 

    // -- this -- 
    .my-block.is-step4 & { display : block } 
} 

я мог тогда активируйте все эти правила одним myBlock.classList.toggle("is-step4"), в отличие от одного для каждого элемента.

Мое решение было прагматичной средой для удобства разработчиков и чистого BEM, но мне интересно, есть ли «чистое» решение BEM, которое также является дружественным с точки зрения строки кодов, необходимых в javascript для обновления элементов?

Answer 1

Просто используйте вложенные селектора для этого случая. Таким образом, у вас будут модификаторы шагов в родительском блоке, который содержит все остальные блоки, на которые вам нужно повлиять (и не бойтесь, если такой родитель - это целая страница).

См. https://en.bem.info/methodology/faq/#can-i-use-nested-selectors - это решение рекомендуется.