修饰符元素的子元素？

Question

采取以下结构:

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

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

如果我需要article__headline为不同--yellow的--blue,我应该做一个CSS选择器,如:

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

或者,在最小化选择深度的实践中,将标记更改为此是否有效的BEM语法:

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

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

我知道技术上它会起作用,但我无法弄清楚这是否有效根据BEM方法.

Answer 1

这是一个完美的问题,而bem的常见问题实际上已经回答了它!

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

例如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 { ... }