css - 如何使用 BEM CSS 修改 block 的多个元素

Question

假设我有以下设置，

.block
  .block__header
  .block__content
  .block__footer

现在我想显示这个 block 的事件状态。假设 block 本身有一个绿色背景，元素 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 {

    }
  }
}

Answer 1

BEM 的理念是保持 block 上下文无关。低特异性只是一种好的做法，而不是黄金法则。我在下面给出了三个有效的解决方案。

如果您确定该 block 不能递归包含在自身中，可以使用简单的级联:

.block--active {
    background-color: green;
}
.block--active .block__element-2,
.block--active .block__element-3 {
    font-weight: bold;
}

如果元素直接位于 block 中，则子选择器有效:

.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 .