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

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与.article--yellow .article__headline { ... }不同，我应该选择如下的CSS选择器：

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

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

article--yellow__headline

因为那时我只能使用1个选择器选择它：urllib.request。

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

Answer 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 { ... }

Answer 2

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

虽然班级名称变得冗长，但BEM允许您轻松自我记录（假设您在理解了这些概念之后也是如此）。另外，对我而言，BEM组件不应相互影响，as detailed here。

修饰符元素的子元素？

2 个答案:

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