1

我和我的团队已经开始实施类似 BEM 的东西（我们以这篇文章为起点）。到目前为止，我所读到的似乎是有道理的。我正在考虑的一个大问题是如何为修改后的组件设置样式。

例如，假设我有.avatar和.avatar--alternate组件/修饰符。也许交替的背景是黑色而不是白色。我应该使用什么 CSS 选择器来设置备用标题的样式，为什么？

我在这里列出了场景：

<div class="avatar">
  <h2 class="avatar-heading">Lorem ipsum...</h2>
</div>

<div class="avatar avatar--dark">
  <h2 class="avatar-heading">Lorem ipsum...</h2>
</div>

// _typography.scss
h1 {
  color: #000;
}

// _avatar.scss
.avatar {
  background: #fff;
}
.avatar--dark {
  background: #000;
}
.avatar-heading {
  color: #222;
}


// option A
.avatar--dark {
  .avatar-heading {
    color: #fff;
  }
}

// option B
.avatar-heading--dark {
  color: #fff;
}

// option C?

我的直觉告诉我 B，因为我这是最不具体的标题样式方式，并且似乎是最“可扩展”或“面向未来”的。另一方面，A 非常引人注目，因为我可能也有.avatar-subHeading，也许在某些段落中我可能会开始患上类炎（？）（例如<h1 class="avatar-heading avatar-heading--dark">）

4

1 回答 1

1

选项 C：

.avatar--dark > .avatar-heading {
    color: #fff;
}

所有这些选项都是正确的。

.avatar-heading如果 C始终是.avatar--darkDOM 树中的子级，则首选 C。

当您确定组件永远不会被递归地包含在自身内部时，首选 A。

否则使用 B。

注意：在 BEM 方法中，第二个div应该同时具有组件类avatar和修饰符类avatar--dark：

<div class="avatar avatar--dark">
于 2014-10-21T05:23:50.353 回答