Javascript 应用应用于块中多个图元的状态更改

我非常喜欢BEM，我通常使用BEM的一个变体，其中我使用状态类来打开/关闭子项，从而在我的SASS中形成易于理解的规则，如：

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

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

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

我想知道的问题是，如何以最简单的方式解决javascript中的状态变化，这种变化应该应用于块中的许多元素。例如，假设我有一个组件，它应该隐藏或显示不同的元素，这取决于您是在流程的

step1

、

step2

还是

step3

如果我只在每个元素上应用状态类，那么边界元法就足够简单了，但这正是问题所在。如果我有10个元素，其中第2步需要隐藏7个元素，那么要添加的javascript量是我刚才在不太纯粹的BEM形式上添加规则的7倍

&__element {
   display: none;

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

然后我可以用一个

myBlock.classList.toggle（“is-step4”）

激活所有这些规则，而不是每个元素一个

---

我的解决方案是开发人员方便和纯边界元法的一个实用的中间点，但我想知道是否有一个“纯”边界元法解决方案在javascript中更新元素所需的代码行方面也是友好的？

在这种情况下只需使用嵌套选择器。因此，在父块上有步骤修饰符，其中包含所有需要影响的其余块（如果父块是整个页面，则不要担心）

请参阅-这是推荐的解决方案