模块子元素应该嵌套在模块修饰符中吗？答案

【问题标题】：Should module child elements be nested in module modifiers?模块子元素应该嵌套在模块修饰符中吗？
【发布时间】：2015-09-01 06:08:34
【问题描述】：

在使用 BEM 编写 css 时，如果您需要在模块元素位于子模块时对其进行更改，您是将模块元素嵌套在子模块中还是为模块元素创建新的类名？

创建一个新类

创建一个新的类名（即module--modifier__element）似乎更符合 BEM 的精神。它可以防止不必要的特异性。但它也增加了很多额外的工作，为模块中的每个元素添加一个额外的类。

嵌套

在模块修饰符中嵌套现有的元素类（即module--modifier module__element {} 会增加一些额外的特异性，但会为您节省大量工作（至少对于大型模块而言）并使标记更易于维护。例如，如果您需要更改模块的修饰符，您只需在标记中更改一个位置，而不必在每个子元素上更改它。

除此之外，如果不是所有的子元素都发生了变化，那么你将不得不参考 css 来确定哪些子元素需要添加一个类。

示例代码

.module {
  display: block;
  width: 90%;
  height: 2rem;
  margin: 2rem auto;
  padding: 0.5em;
  background: #fff;
  border: 2px solid #333;
}

.module--modified1 {
  background: #333;
  border: none;
}

.module--modified2 {
  background: #baa;
  border: 3px solid #8f8;
}

  .module__element {
    color: #333;
    text-align: center;
  }

  /* Option 1 */
  /* In sass this would actually be nested within the module_modified1 block */
  .module--modified1 .module__element {
    color: #fff;
  }

  /* Option 2 */
  .module--modified2__element {
    color: #fff;
    font-size: 1.3em;
  }

<div class="module">
  <div class="module__element">Module</div>
</div>

<div class="module module--modified1">
  <div class="module__element">Module Modifier 1</div>
</div>

<div class="module module--modified2">
  <div class="module__element module--modified2__element">Modulue Modifier 2</div>
</div>

【问题讨论】：

“模块”是块吗？什么是“子模块”？一个元素？
@Tarh 子模块是模块修饰符的另一个名称。
在“选项 1”中，您写道“在 sass 中，这实际上会嵌套在 module_modified1 块中”。我在寻找如何在更少的情况下做到这一点时发现了这个问题。你会如何在 sass 中做到这一点？你知道less有没有类似的方法吗？ & 符号引用父级，这意味着输出（&--modified1 中的 &__element）将是 .module--modified1__element...
@bWlrYWphdWhvbmVu 这是关于嵌套规则的 Sass 文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_rules

标签： css bem

【解决方案1】：

这两个选项都有效。降低特异性是一种好习惯，但让代码简单也是一种好习惯。

但是，BEM 块必须是上下文无关的。如果一个块可以递归地包含在其自身中，则必须避免级联。例如，通用块 fun-rounded-block 可以像这样递归重用：

<div class="fun-rounded-block fun-rounded-block--blue-version">
    <div class="fun-rounded-block__content">
        <div class="some-block-here">
            <div class="fun-rounded-block">
                <p class="fun-rounded-block__content">element in the sub-block here</p>
            </div>
        </div>
    </div>
</div>

在此示例中，您不能对元素样式使用级联，因为选择器 .fun-rounded-block--blue-version .fun-rounded-block__content 会干扰子块。

【讨论】：