SCSS两层BEM嵌套样式不生效的解决方法

你的emotion__text类下的outline样式不生效，核心原因是类名匹配逻辑错位：

• 你写的SCSS嵌套编译后，蓝色outline样式绑定在.emotion__text这个基础元素类上
• 你会发现情绪对应的文字颜色其实可以正常生效，因为.emotion__text--happy选择器可以直接匹配到当前HTML里的span，但绑定在基础类上的outline样式，因为span没有加emotion__text类，选择器匹配失败自然不会生效
• 按照BEM规范，修饰符（--xxx后缀的类）是用来标记元素的变体状态，不能脱离元素基础类单独使用

推荐使用标准BEM写法，不需要改动原有SCSS，只需要修正HTML的类名，给文本元素同时加上基础元素类和对应情绪的修饰符类即可：

<div class="emotion">
  <span class="emotion__text emotion__text--happy">
    Happy
  </span>
  <span class="emotion__text emotion__text--sad">
    Sad
  </span>
  <span class="emotion__happy"> 
    😀
  </span>
</div>

修正后效果：

• 所有情绪文本都会加载emotion__text类的蓝色outline样式
• 开心文本匹配emotion__text--happy显示rebeccapurple色
• 难过文本匹配emotion__text--sad显示黄色

如果你不想给元素加两个类，也可以调整SCSS写法，用属性选择器匹配带__text前缀的类名，不需要改动原有HTML就能生效，但这种写法不符合BEM最佳实践，可维护性更差：

.emotion{
  display: flex;
  [class*="__text"] {
    outline: 1px solid blue;
    &--happy{
      color: rebeccapurple
    }
    &--sad{
      color: yellow
    }
  }
}

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