3

次の設定があるとしましょう。

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

    }
  }
}
4

1 に答える 1

1

BEM の哲学は、ブロックをコンテキストフリーに保つことです。特異度が低いのは良い習慣であり、黄金律ではありません。以下に3つの有効な解決策を示します。

ブロックをそれ自体に再帰的に含めることができないことが確実な場合は、単純なカスケードを使用できます。

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

ここで別の解決策を参照してください。

于 2015-06-10T11:22:17.213 に答える