Question

我的团队和我已经开始实施类似BEM-ish的东西（我们使用this article作为我们的起点）。到目前为止我所读到的内容似乎有道理。我头脑中的一个大问题是如何为修改过的组件的孩子定型。

例如，假设我有.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，因为我这是标题风格的最不具体的方式，似乎是最可靠的＆＃34;可扩展的＆＃34;或者＆＃34;面向未来＆＃34;。另一方面，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">

为修改后的组件设置子项

1 个答案: