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-ish方式解决的问题是如何处理应该应用于块中的许多元素的javascript中的状态更改。例如，假设我有一个应该隐藏或显示不同元素的组件，具体取决于您是否在进程的step1，step2或step3中。

如果我应该在每个元素上应用状态类，那么BEM位很容易，但这只是问题所在。如果我有10个元素，其中7需要在步骤2中隐藏，那么这就是我要添加的7倍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 - 这是推荐的解决方案。

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

1 个答案: