修饰符的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。

有第三个解决方案，但这是非正统的。在某些情况下，如果您确定在DOM级别上该元素是该块的直接子元素，则建议使用子选择器（例如，如果该块始终是<ul>并且该元素是<li>个孩子）。然后，您可以执行以下操作：

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