CSS 修饰符的 BEM 子代

Question

我是 BEM 方法学的新手，我有一个针对修饰符子项的问题。

假设我有这个 HTML:

<div class="block-container">
    <div class="block-container__element"></div>
</div>

在block-container我添加了修饰符block-container--modifier。

而 CSS 将是：

.block-container {
    ...
}
.block-container__element {
    ...
}
.block-container--modifier {
    ...
}

我的问题是：应用修饰符后如何更改 __element 的某些 CSS 属性？

据我所知，我们必须避免使用嵌套子项，但我认为有时必须打破该规则才能实现这种事情，对吗？

我正在使用纯 CSS，没有 LESS，没有 SASS。

Answer 1

通常应避免级联，但在这种情况下则不然。

如果您确定块 block-container 永远不会递归包含在另一个 block-container 中，那么您可以这样做：

.block-container--modifier .block-container__element {
}

否则你必须在元素上放置另一个修饰符：block-container__element--modifier.

还有第三种解决方案，但它是非正统的。在某些情况下，我建议使用 child 选择器，如果您确定在 DOM 级别，元素是块的直接 child （例如，如果块总是是一个<ul>，元素是<li> children)。然后你可以这样做：

.block-container--modifier > .block-container__element {
}

CSS BEM children of a modifier