4

在使用 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>

4

1 回答 1

0

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

但是，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会干扰子块。

于 2015-06-21T09:42:04.573 回答