如何使用边界元CSS修改块的多个元素

假设我有以下设置

.block
  .block__header
  .block__content
  .block__footer

现在我想显示此块的活动状态。假设块本身有一个绿色背景，元素2和3应该有粗体文本。我理解边界元法的原理，为了尽可能降低特异性，不应该使用子选择器

那么这真的是一种方法吗

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

    }
  }
}

---

边界元法的哲学是保持块与上下文无关。低特异性只是一种良好的做法，而不是黄金法则。下面我给出三个有效的解决方案

如果确定块本身不能递归包含，则可以使用简单的级联：

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

或扁平溶液（但不干燥）：

---

使用SCS，有几种方法可以编写第一个解决方案。下面是我使用的一个：

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

---

请参阅。

您确定这三个元素不同吗？如果你给出一些更具体的例子，答案会更有帮助。是的，我确信：）编辑代码只是为了弄清楚……我发现一些非常有用的东西：

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