Question

如果在模块元素位于子模块中时需要对模块元素进行更改，那么在使用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>

Answer 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会干扰子块。

模块子元素是否应嵌套在模块修饰符中？

1 个答案: