修饰符元素的子元素？

Question

采用以下结构：

<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 select 还是类似的：

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

或者，在最小化 selection-depth 的实践中，将标记更改为这样的 BEM 语法是否有效：

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

因为这样我就可以 select 它只使用 1 select 或者：article--yellow__headline.

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

Answer 1

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

Can a block modifier affect elements?

If I have a block modifier, for example xmas, and I want the elements within that block to also be xmas themed, how would it be best to do it.

Does a --xmas suffix for every element seem necessary? Or would this be the one use-case for nesting (e.g. block--xmas block__elem { ... } ?

However in general BEM recommends to avoid nested selectors, this is the case when they are reasonable.

When creating the nested selector, you declare that one entity depends on another. As BEM introduces independent components, such an approach is not suggested when we are speaking about 2 different blocks.

But when it comes to a block and its element, they are not of equivalent meaning. By it definition, an element does not make any sense outside its parent block. So, an element is a block-dependent entity. Assuming this, it is quite normal and logical that an element is affected by the block's current state.

So, this is quite a pattern in BEM to code
.my-block--xmas .my-block__button {
    /* Jingle bells, jingle bells, jingle all the way.*/ }

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

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

Answer 2

我不认为两个级别太深，无法指定 .article--yellow .article__headline 的特异性。从技术上讲，如果没有 .article--yellow 颜色修饰符，.article__headline 永远不会出现。

虽然 class 名称变得冗长，但 BEM 允许您轻松地自行编写文档（假设在您之后的人也理解这些概念）。另外，对我来说，BEM 组件不应该相互影响，as detailed here.

修饰符元素的子元素？

Child element of modifier element?

html

css

bem

Can a block modifier affect elements?