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

Question

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

创建一个新的Class

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

嵌套

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

此外，如果不是所有的子元素都发生变化，那么您将不得不参考 css 以确定哪些子元素需要添加 class。

示例代码

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

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

Should module child elements be nested in module modifiers?

css

bem