应用适用于块中许多元素的状态更改

Question

我非常喜欢 BEM，我通常使用 BEM 的变体，我使用状态类来切换子项 on/off，从而使我的 [=31] 中的规则易于理解=]喜欢：

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

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

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

我想知道如何以最 BEM-ish 的方式解决的问题是如何处理我的 javascript 中的状态更改，该更改应应用于块中的许多元素。例如，假设我有一个组件应该隐藏或显示不同的元素，具体取决于您是在进程的 step1、step2 还是 step3 中。

如果我只对每个元素应用状态类，BEM 位就足够简单了，但这就是问题所在。如果我有 10 个元素，其中 7 个需要在步骤 2 中隐藏，那么添加的数量是 javascript 的 7 倍，就好像我刚刚在

的不那么纯 BEM 形式上添加了规则一样

&__element {
   display: none;

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

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

我的解决方案是开发人员便利性和纯 BEM 的务实中间点，但我想知道是否有 "pure" BEM 解决方案在 [=28= 所需的代码行方面也很友好] 更新元素？

Answer 1

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

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

应用适用于块中许多元素的状态更改

Applying state changes that apply to many elements in a block

javascript

css

bem