css - 什么是全局类继承的正确 BEM 方法？

Question

我最近开始使用 BEM 方法，我对类继承感到困惑，或者更确切地说 - 当我们谈论 BEM 时 - 修饰符的一些用例。

让我们看看这个例子，我有一个简单的元素，只有几个 child

.b-content { width: 100%; }
.b-content__image { display: block; }
.b-content__date {  font-size: 14px; }
.b-content__title { font-size: 30px; }
.b-content__text { font-size: 16px; }

现在我想重用我的 .b-content block ，样式略有不同，所以我使用修饰符 .m-compact 现在我不确定什么方法是正确的(在 BEM 中)。

我是否应该将修饰符类附加到所有元素(根据文档我发现它更有效):

.b-content.m-compact { width: 50%; }
.b-content__image.m-compact { display: none; }
.b-content__date.m-compact { font-size: 12px; }
.b-content__title.m-compact { font-size: 24px; }
.b-content__text.m-compact { font-size: 14px; }

或者我应该只将修饰符附加到父元素:

.b-content.m-compact { width: 50%; }
.b-content.m-compact .b-content__image { display: none; }
.b-content.m-compact .b-content__date { font-size: 12px; }
.b-content.m-compact .b-content__title { font-size: 24px; }
.b-content.m-compact .b-content__text { font-size: 14px; }

我发现第二种方法更合乎逻辑，因为我正在编写 层叠 样式，在现实世界中，如果我想给 10 个人写电子邮件，我会写一个，而且只写一个添加更多收件人，但另一方面我意识到 BEM 实际上是非级联方法。

那么我应该使用什么以及为什么？

Answer 1

正如您在问题的最后几行中指出的那样，在执行 BEM 时，您应该避免级联，因此，作为对此的必然结果，您不必在不需要的地方重复修饰符。

对于你的修饰符，我会写这样的东西:

.b-content--m-compact {
  width: 50%;
}

在您的示例中，Block 和 Modifier 仅设置宽度，因此这是一个有限的用例。一般来说，使用某种 CSS 预处理来简化代码编写会很方便，例如在 SASS 中:

.my-block
  width: 100%
  color: red
  &--modifier
    @extend .my-block
    border: 1px solid red

这将导致:

.my-block, .my-block--modifier {
  width: 100%;
  color: red;
}
.my-block--modifier {
  border: 1px solid red;
}