同一父元素多类共存失效：BEM规范下主题样式调试问题

错误原因 #

你把所有样式包裹进.header-container后，主题类的选择器逻辑出错了。原来的.solid-green .top-banner是直接匹配带有solid-green类的元素下的top-banner子元素，但当你把样式嵌套进.header-container时，如果写成.header-container .solid-green .top-banner，这个选择器会找header-container内部带有solid-green类的子元素，而你的HTML里solid-green是和header-container绑定在同一个<header>元素上的，所以这个选择器根本匹配不到目标，样式自然失效。

修正方案（保留原有类名） #

用SCSS的父选择器&来组合类名，让.header-container和主题类匹配同一个元素，修正后的CSS如下：

.header-container {
  // 基础样式
  .top-banner {
    height: 70px;
  }

  .main-banner {
    height: 140px;
  }

  // 主题样式：&代表父选择器.header-container，组合后是.header-container.solid-green
  &.solid-green {
    .top-banner {
      background-color: green;
    }
    
    .main-banner {
      background-color: lightgreen;
    }
  }

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

编译后的CSS会生成.header-container.solid-green .top-banner这类选择器，正好匹配你的HTML结构，主题样式就能正常生效。

严格遵循BEM规范的写法 #

如果要彻底符合BEM的“块-元素-修饰符”规则，建议调整类名命名：

• 块：header-container
• 元素：header-container__top-banner、header-container__main-banner（块名+双下划线+元素名）
• 修饰符：header-container--solid-green、header-container--solid-blue（块名+双中划线+修饰符名）

对应的CSS：

.header-container {
  &__top-banner {
    height: 70px;
  }

  &__main-banner {
    height: 140px;
  }

  &--solid-green {
    .header-container__top-banner {
      background-color: green;
    }
    
    .header-container__main-banner {
      background-color: lightgreen;
    }
  }

  &--solid-blue {
    .header-container__top-banner {
      background-color: blue;
    }
    
    .header-container__main-banner {
      background-color: lightblue;
    }
  }
}

对应的HTML：

<header class="header-container header-container--solid-green">
  <div class="header-container__top-banner">Top banner</div>
  <div class="header-container__main-banner">Main banner</div>
</header>

这种写法结构更清晰，完全符合BEM规范，也避免了类名冲突的问题。

内容的提问来源于stack exchange，提问作者cts