修饰符的 CSS BEM 子项答案

【问题标题】：CSS BEM children of a modifier修饰符的 CSS BEM 子项
【发布时间】：2019-05-30 08:38:31
【问题描述】：

我是 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。

【问题讨论】：

标签： css bem

【解决方案1】：

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

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

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

否则你必须在元素上添加另一个修饰符：block-container__element--modifier。

还有第三种解决方案，但它是非正统的。在某些情况下，如果您确定在 DOM 级别，元素是块的直接子元素，我建议使用子选择器（例如，如果块始终是 <ul> 并且元素是 @987654326 @ 孩子们）。然后你可以这样做：

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

【讨论】：