Question

我最近开始使用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实际上是非级联方法。

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

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;
}

Answer 2

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

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

阻止BEM set namespace

因此，您可以为块设置默认样式，并将所有唯一（可以更改）设置为带有修饰符的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>

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

所以现在你需要使用修饰符（portfolio_theme_list）为你的块定义样式。

您有两个选择：

1）如果你有2个不同的块 - 你需要单独的普通和   独特的风格。独特的样式放置在带有修改块的样式中。

2）如果你只有一个不同的块＆amp;你已经有了风格   这块。然后你可以覆盖并不分开常见   样式（但如果添加另一个修饰符/实例，则会导致疼痛）

什么是正确的BEM方法进行全局类继承？

2 个答案: