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

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 block 必须是上下文无关的。如果一个 block 可以递归地包含在自身中，那么就必须避免级联。例如，通用 block 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 会干扰子 block 。