Sass中BEM修饰器下子元素样式编译错误求标准解决方案

你遇到的问题本质是SCSS嵌套中&符号的指代逻辑和BEM命名规范的冲突——当前写法里，&--standard内部的&__row会把&替换成.mytable--standard，所以编译出了不符合预期的.mytable--standard__row，这其实违背了BEM的核心规则：元素__row始终属于块mytable，而不是块的修饰器--standard。

根据你“仅为带有修饰器的table类应用row样式”的需求，这里有两种标准的解决方式，对应不同的场景：

场景1：当table带有--standard修饰器时，其内部的row元素应用样式 #

这是最贴合你需求的写法，我们需要在修饰器的嵌套中，直接引用原始块的元素选择器，而不是用&拼接：

.mytable { 
  font-size: 16px; 
  margin: 30px 0; 

  // 定义块的修饰器
  &--standard { 
    border: 1px solid red; 

    // 针对当前修饰器下的row元素设置样式
    .mytable__row { 
      border: 1px solid blue; 
    } 
  }

  // 可选：定义row元素的基础样式
  &__row {
    // 比如：padding: 8px;
  }
}

编译后的CSS会是：

.mytable { font-size: 16px; margin: 30px 0; }
.mytable--standard { border: 1px solid red; }
.mytable--standard .mytable__row { border: 1px solid blue; }
.mytable__row { /* 基础样式 */ }

这样就实现了：只有当table标签同时拥有mytable和mytable--standard类时，它内部的mytable__row元素才会被应用蓝色边框。

场景2：给row元素本身添加修饰器（可选） #

如果你实际需求是给特定的row元素单独加样式（而不是依赖table的修饰器），可以遵循BEM“元素修饰器”的规范，把修饰器嵌套在元素选择器下：

.mytable { 
  font-size: 16px; 
  margin: 30px 0; 

  &--standard { 
    border: 1px solid red; 
  }

  &__row {
    // row元素的基础样式
    padding: 8px;

    // 元素的修饰器
    &--standard {
      border: 1px solid blue;
    }
  }
}

编译后得到：

.mytable { font-size: 16px; margin: 30px 0; }
.mytable--standard { border: 1px solid red; }
.mytable__row { padding: 8px; }
.mytable__row--standard { border: 1px solid blue; }

这种写法需要给row元素添加mytable__row--standard类才能生效，适合单独控制某一行样式的场景。

关键提醒 #

BEM的核心是块-元素-修饰器的层级独立：元素永远属于块，修饰器要么属于块，要么属于元素，不要把块的修饰器和元素拼接成一个新选择器（比如.mytable--standard__row），这会破坏BEM的可读性和可维护性。

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