search

Home  >  Q&A  >  body text

Multiple classes on the same parent element do not work when used simultaneously: BEM

I have two classes on the header: .header-container and a theme class like solid-green or solid-blue.

The current markup works fine in applying related theme styles, but I want to use BEM, so all CSS should be wrapped in a header-container class:

.header-container {
  // all component styles
}

.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;
  }
}
<header class="header-container solid-green">
  <div class="top-banner">Top banner</div>
  <div class="main-banner">Main banner</div>
</header>

However, when I wrap the CSS with the header-container class, the theme class no longer works. Can anyone tell me where I'm going wrong?

P粉208469050P粉208469050439 days ago587

reply all(1)I'll reply

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

    reply
    0
  • Cancelreply