Question

我正在努力坚持BEM方法，我经常遇到这个问题，我觉得是时候向他们寻求解决方案（或意见）了。

考虑我有一个人体;这个人体默认是轻的，因此，它的手臂也很轻。我在CSS中的伪代码可能如下所示：

.human--dark {
    background-color: black;
}

现在我们想为黑暗的人类添加一个类。我们可以为此创建一个修饰符：

.human--dark {
    background-color: black;
}

.human--dark .human__arm {
    background-color: black;
}

我面临的问题是，到现在为止，人类的手臂还是白色的。我们可以用我知道的两种方式将它们变成黑色：

解决方案A

.human--dark {
    background-color: black;
}

.human__arm--dark {
    background-color: black;
}

该解决方案通过向CSS添加特异性来打破BEM方法。但是，我觉得这个解决方案更加便携，你肯定只会修改人类，并假设它的所有元素也会适应父母的变化。

解决方案B

background-color: inherit;

我喜欢认为＆＃39; Block＆＃39;是BEM中可重用的组件。如果人类还有其他各种身体部位也需要变白，那么为了达到这个目的，修改所有的块元素似乎不太可维护。

虽然const someType&可能看起来像此案例的解决方案，但在实际应用中，我们可能会有一个包含需要浅色文本的元素的深色背景。

当父文本块变亮时，我们如何将光文本修改为暗？

Answer 1

第一个解决方案是假设黑暗的人可能不一定有白色手臂的更好的解决方案。

BEM语法背后的想法是允许可组合性。以这种方式编写选择器会失败。

定义这些选择器的更好方法是：

.human {} /* block */
.human--dark {} /* modified block */
.human--arm {} /* block element */

这些可以在标记中以这种方式完全组合：

<div class="human human--dark">
   <div class="human__arm">
     Human
   </div>
</div>

对于第二个问题，您可能希望利用CSS预处理器来计算文本颜色的背景颜色的倒数。

在Sass中，使用自定义mixin以这种方式完成：

@mixin duotone ($color) {
  background-color: $color;
  color: invert($color);
}

.human {
    @include duotone(white);
}

.human--dark {
    @include duotone(black);
}

.human__arm {
}

Answer 2

为了通过父级修饰符

修改子元素

我们应嵌套元素选择器，如下所示：

带有元素的块：

SWRevealViewController

块修改器修改子元素：

revealViewController()?.setFront(viewController, animated: false)

如果要在 SCSS 中实现相同的目标，可以使用以下方法：

.human {
    background-color: white;
}

.human__arm {
    background-color: white;
}

Answer 3

如果您使用的是scss，则可以使用插值法来避免重复

.human {
  $c: &;
  background-color: white;

  &__arm {
    background-color: white;
  }

  &--dark { 
    background-color: black;
    #{$c}__arm {
      background-color: black;
    }
  }

}

此外，这可能与问题无关，但是在手臂上使用background-color: inherit意味着您无需更改手臂的任何CSS，因为它将继承自父级。

修改块中的元素 - 修改器正确

3 个答案: