同じ親要素上の複数のクラスを同時に使用すると機能しません: BEM

Question

ヘッダーには 2 つのクラスがあります: .header-container と solid-green または solid-blue のようなテーマ クラスです。

現在のマークアップは、関連するテーマ スタイルを適用する際に問題なく機能しますが、BEM を使用したいので、すべての CSS を header-container クラスでラップする必要があります:

リーリー

リーリー リーリー

ただし、CSS を header-container クラスでラップすると、テーマ クラスが機能しなくなります。どこが間違っているのか誰か教えてもらえますか？

Answer 1

.header-container {
  .top-banner {
    height: 70px;
  }
  
  .main-banner {
    height: 140px;
  }

  &.solid-green {
    .top-banner {
      background-color: green;
    }
    
    .main-banner {
      background-color: lightgreen;
    }
  }
  
  &.solid-blue {
    .top-banner {
      background-color: blue;
    }
    
    .main-banner {
      background-color: lightblue;
    }
  }
}