javascript - 应用状态更改，该状态更改应用于块中的许多元素

我非常喜欢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个元素，其中需要在第2步中隐藏7个元素，那么要添加的JavaScript就是原来的7倍，就好像我刚刚在不那么纯正的BEM形式上添加了一条规则

&__element {
   display: none;

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

然后，我可以用一个myBlock.classList.toggle("is-step4")激活所有这些规则，而不是每个元素都激活一个。

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

最佳答案

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

请参见https://en.bem.info/methodology/faq/#can-i-use-nested-selectors-这是推荐的解决方案。