同一父元素上的多个类不能同时工作：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

您可能正在混合使用 BEM 和 SCSS。 在 SCSS 中，您可以使用以下语法：

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

但是在CSS中，你需要这样写：

.solid-green .top-banner {
  background-color: green;
}

.solid-green .main-banner {
  background-color: lightgreen;
}

BEM 是一种为应用程序组织 CSS 的方法，而 SCSS 是一个 CSS 预处理器。

您可以将 BEM 方法与纯 CSS 或 SCSS 等预处理器一起使用。

如果您使用预处理器，您的代码将正常工作（它在 stackoverflow 上的代码片段中不可用，但您可以在 codepen 上使用它们）。这是您使用 SCSS 预处理器的代码：codepen 中的示例