修饰组件的子元素样式

Question

我和我的团队已开始实施类似BEM-ish的工具（我们以本文为起点）。 到目前为止，我所读的内容似乎很有意义。 我要解决的一个大问题是如何为经过修改的组件的子元素设置样式。

例如，假设我有.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"> ）

Answer 1

选项C：

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

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

如果.avatar-heading始终是.avatar--dark的子.avatar--dark在DOM树中为.avatar--dark ，请.avatar--dark

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

否则使用B。

---

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

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