css - 修改组件的子项样式

Question

我和我的团队已经开始实现类似于 BEM 的东西(我们使用 this article 作为起点)。到目前为止，我所读的内容似乎是有道理的。我正在思考的一个大问题是如何设置修改后组件的子项的样式。

例如，假设我有 .avatar和 .avatar--alternate成分/修饰符。也许 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 因为我这是设置标题样式的最不具体的方式，而且似乎是最“可扩展”或“面向 future ”的方式。另一方面，A 非常引人注目，因为我可能有 .avatar-subHeading还有，也许有些段落在这种情况下我可能会开始患有类炎(？)(例如 <h1 class="avatar-heading avatar-heading--dark"> )

Answer 1

选项 C:

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

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

如果 .avatar-heading 始终是 DOM 树中 .avatar--dark 的子项，则首选 C。

当您确定组件永远不会递归包含在其自身中时，请选择 A。

否则使用 B。

---

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

<div class="avatar avatar--dark">