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

【问题标题】：Applying state changes that apply to many elements in a block应用适用于块中许多元素的状态更改
【发布时间】：2023-03-19 00:58:01
【问题描述】：

我非常喜欢 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 是我刚刚在不那么 BEM 纯形式的

上添加规则的 7 倍

&__element {
   display: none;

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

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

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

【问题讨论】：

标签： javascript css bem

【解决方案1】：

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

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

【讨论】：