検索

ホームページ  >  に質問  >  本文

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

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

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

リーリー

リーリー リーリー

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

P粉208469050P粉208469050439日前586

全員に返信(1)返信します

  • P粉510127741

    P粉5101277412023-09-11 16:55:45

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

    返事
    0
  • キャンセル返事