什么是全局类继承的正确 BEM 方法？答案

【问题标题】：What is right BEM approach to global class inheritance?什么是全局类继承的正确 BEM 方法？
【发布时间】：2016-11-21 04:05:30
【问题描述】：

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

我们看这个例子，我有一个简单的元素，孩子很少

.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 块，所以我使用修饰符 .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 实际上是非级联方法。

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

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： css bem

【解决方案1】：

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

对于你的修饰符，我会这样写：

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

在您的示例中，块和修饰符仅设置宽度，因此这是一个有限的用例。一般来说，使用某种 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;
}

【讨论】：

实际上这个修饰符不仅设置了容器的宽度，它还设置了字体大小和子元素的显示。无论如何，您使用预处理器的示例似乎可以解决我的问题，但是由于其他同事和公司内部例程，我无法在我最近的项目中使用它。所以我开始意识到我的问题是没有预处理器和我的公司......
好的@madr，现在我对你的观点有了更好的把握。您对修改器的使用是传统 CSS（带有级联压力）和 BEM 之间的混合。您不应将 Element 定义为其他东西的后代/子代，而应将其定义为“独立”类。 CSS Wizardry 的 Harry Roberts 对此有一篇很好的文章：csswizardry.com/2013/01/… 我希望这是有道理的。
另外，@madr，如果你是唯一一个编写 CSS 的人，你可以自己使用 SASS，即使它不是公司范围内使用的工具。我这样做了一段时间，直到我获得在公司工作流程中采用 SASS 之前，我只是提交了生成的 CSS。

【解决方案2】：

BEM 中的修饰符如下所示：.block_modName_modValue

您可以添加其他类 - 但它不是 BEM。而且修饰符还有一个名称和值。

BEM 集合命名空间中的块

因此，您为块设置默认样式，并且所有唯一的（可以更改的）放置在带有修饰符的 css 中。这样你的样式就不会乱了。

为此，您需要：

在块样式中放置常用样式(.portfolio)
像这样放置独特的风格（带修饰符）。（portfolio_theme_list）

在 css 中你不需要分开这个（需要预处理器）。

.portfolio {
    /* common styles */

    &_theme_list {

    /* modifiers style */
    }
}

在 BEM 项目存根（模板引擎）中，它看起来像这样：

如果你添加修饰符来阻止。然后编译（bemjson）为html。

{
    block : 'portfolio',
    mods : { theme : 'list' },
}

你会看到这段代码

<div class="portfolio portfolio_theme_list">
</div>

您正确编写元素并理解它们需要分离（没有继承）。

所以现在您只需使用 modifier(portfolio_theme_list) 为您的块定义样式。

你有两个选择：

1) 如果您有 2 个不同的块 - 您需要单独的公共和独特的风格。独特的样式放置在带有修改块的样式中。

2) 如果您只有 1 个不同的块并且您已经有样式这块。然后你可以覆盖而不分离公共样式（但如果添加另一个修饰符/实例，可能会导致痛苦）

【讨论】：