同一父元素上的多个类同时使用时不起作用：BEM

Question

我在标题上有两个类： .header-container 和一个主题类，例如 solid-green 或 solid-blue。

当前标记在应用相关主题样式方面工作正常，但我想使用 BEM，因此所有 CSS 都应包装在 header-container 类中：

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

但是，当我使用 header-container 类包装 CSS 时，主题类不再起作用。谁能告诉我哪里出错了？

Answer 1

雷雷