如何使用 BEM 修改块的多个元素 CSS
How to modify multiple elements of a block with BEM CSS
假设我有以下设置,
.block
.block__header
.block__content
.block__footer
现在我想显示这个块的活动状态。假设块本身有一个绿色背景,元素 2 和 3 应该有粗体文本。据我了解 BEM 的哲学,不应该使用子选择器来保持尽可能低的特异性。
那么真的是这样吗?
.block.block--active
.block__header
.block__content.block__content--active
.block__footer.block__footer--active
更新:我将如何在 SASS 中编写该解决方案(非常新)?到目前为止这是我的设置...如果我可以使用嵌套选择器,这里的最佳实践是什么?
.block {
&--active {
}
&__header {
}
&__content {
// active modifier of content
&--active {
font-weight: bold;
}
// would be the same as
.block--active & {
font-weight: bold;
}
// but can i reference the active block somehow else in sass?
// & is a parent selector but i would need the parent of the parent here...
}
&__footer {
&--active {
}
}
}
BEM 的理念是保持块上下文无关。低特异性只是一种好的做法,而不是黄金法则。我在下面给出三个有效的解决方案。
如果您确定该块不能递归包含在自身中,可以使用简单的级联:
.block--active {
background-color: green;
}
.block--active .block__element-2,
.block--active .block__element-3 {
font-weight: bold;
}
如果元素直接位于块中,则子选择器有效:
.block--active {
background-color: green;
}
.block--active > .block__element-2,
.block--active > .block__element-3 {
font-weight: bold;
}
或平面解决方案(但不是 DRY):
.block--active {
background-color: green;
}
.block__element-2--active,
.block__element-3--active {
font-weight: bold;
}
使用SCSS,有几种方法可以编写第一个解决方案。这是我使用的:
.block {
&--active {
background-color: green;
}
&--active &__element-2,
&--active &__element-3 {
font-weight: bold;
}
}
参见 another solution here。
假设我有以下设置,
.block
.block__header
.block__content
.block__footer
现在我想显示这个块的活动状态。假设块本身有一个绿色背景,元素 2 和 3 应该有粗体文本。据我了解 BEM 的哲学,不应该使用子选择器来保持尽可能低的特异性。
那么真的是这样吗?
.block.block--active
.block__header
.block__content.block__content--active
.block__footer.block__footer--active
更新:我将如何在 SASS 中编写该解决方案(非常新)?到目前为止这是我的设置...如果我可以使用嵌套选择器,这里的最佳实践是什么?
.block {
&--active {
}
&__header {
}
&__content {
// active modifier of content
&--active {
font-weight: bold;
}
// would be the same as
.block--active & {
font-weight: bold;
}
// but can i reference the active block somehow else in sass?
// & is a parent selector but i would need the parent of the parent here...
}
&__footer {
&--active {
}
}
}
BEM 的理念是保持块上下文无关。低特异性只是一种好的做法,而不是黄金法则。我在下面给出三个有效的解决方案。
如果您确定该块不能递归包含在自身中,可以使用简单的级联:
.block--active {
background-color: green;
}
.block--active .block__element-2,
.block--active .block__element-3 {
font-weight: bold;
}
如果元素直接位于块中,则子选择器有效:
.block--active {
background-color: green;
}
.block--active > .block__element-2,
.block--active > .block__element-3 {
font-weight: bold;
}
或平面解决方案(但不是 DRY):
.block--active {
background-color: green;
}
.block__element-2--active,
.block__element-3--active {
font-weight: bold;
}
使用SCSS,有几种方法可以编写第一个解决方案。这是我使用的:
.block {
&--active {
background-color: green;
}
&--active &__element-2,
&--active &__element-3 {
font-weight: bold;
}
}
参见 another solution here。