修饰元素的子元素？答案

【问题标题】：Child element of modifier element?修饰元素的子元素？
【发布时间】：2016-08-02 04:59:16
【问题描述】：

取如下结构：

<div class='article article--yellow'>
  <div class='article__headline'>...</div>
</div>

<div class='article article--blue'>
  <div class='article__headline'>...</div>
</div>

如果我需要使--yellow 与--blue 的article__headline 不同，我是否应该使用如下 CSS 选择器：

.article--yellow .article__headline { ... }

或者，在最小化选择深度的实践中，将标记更改为这样的 BEM 语法是否有效：

<div class='article article--yellow'>
  <div class='article--yellow__headline'>...</div>
</div>

因为那时我只能使用 1 个选择器来选择它：article--yellow__headline。

我知道从技术上讲它会起作用，但根据 BEM 方法，我无法确定这是否有效。

【问题讨论】：

标签： html css bem

【解决方案1】：

这是一个完美的问题，bem's faq actually answered it！

块修饰符可以影响元素吗？

如果我有一个块修饰符，对于例如xmas，我希望该块中的元素也是 xmas主题，怎么做最好。

每个元素都需要一个--xmas 后缀吗？或者这会成为嵌套的一个用例（例如block--xmas block__elem { ... } ?

不过一般 BEM 建议避免使用嵌套选择器，这是合理的情况下。

创建嵌套选择器时，您声明一个实体依赖另外一个。由于 BEM 引入了独立组件，因此这种方法当我们谈论 2 个不同的块时，不建议这样做。

但是当涉及到一个块和它的元素时，它们不是等价的意思。根据它的定义，一个元素不会产生任何在其父块之外感知。所以，一个元素是依赖于块的实体。假设这一点，一个元素是非常正常和合乎逻辑的受方块当前状态的影响。

所以，这是 BEM 中的一种编码模式
.my-block--xmas .my-block__button {
    /* Jingle bells, jingle bells, jingle all the way.*/ }

所以答案应该是你的第一个方法

.article--yellow .article__headline { ... }

【讨论】：

【解决方案2】：

我认为分配.article--yellow .article__headline 的特异性并不过分两个层次。从技术上讲，无论如何，如果没有 .article--yellow 颜色修饰符，.article__headline 将永远不会出现。

尽管类名很长，但 BEM 允许您轻松地编写文档（假设您也了解这些概念之后的人）。另外，对我来说，BEM 组件不应该相互影响，as detailed here。

【讨论】：