为BEM规范配置Sass Lint时遇类名校验问题求助

别担心，你并没有误解标准BEM规范——问题出在sass-lint的strictbem规则是BEM的一个严格变体，它的要求比通用BEM更苛刻。

为什么.bus__tyre--front会报错？ #

sass-lint的strictbem约定不允许「元素带修饰符」的写法，它只认可三种格式：

• 纯块：.bus
• 块+元素：.bus__tyre
• 块+修饰符：.bus--front

而你写的.bus__tyre--front属于「块+元素+修饰符」，这在strictbem的规则里是不被允许的——它认为所有修饰符都必须直接关联到块，而不能附加在元素上。

两种解决思路 #

1. 调整写法适配strictbem规则

如果你想继续使用strictbem，可以把修饰符逻辑转移到块上，或者通过父级选择器控制元素样式：

• 方式一：将修饰符绑定到块，通过嵌套选择器控制元素：

  .bus {
    position: relative;
    
    &--front-tyre {
      &__tyre {
        /* front轮胎的样式 */
      }
    }
    
    &__tyre {
      position: absolute;
      /* 默认轮胎样式 */
    }
  }
  

• 方式二：用块的修饰符来控制元素变体：

  .bus {
    position: relative;
    
    &__tyre {
      position: absolute;
    }
    
    &--front {
      .bus__tyre {
        /* front轮胎的样式 */
      }
    }
  }
  

2. 修改sass-lint配置，使用标准BEM规则

如果你更倾向于遵循通用BEM（允许block__element--modifier），可以把配置里的strictbem换成bem约定：

# .sass-lint.yml 中的配置
class-name-format:
  - 2 # 错误级别，2代表报错
  - convention: bem

或者直接自定义正则，完全匹配你需要的BEM格式：

class-name-format:
  - 2
  - convention: "^[a-z]([a-z0-9-]+)?(__[a-z0-9]+)?(--[a-z0-9-]+)?$"

这样就能让.bus__tyre--front顺利通过校验了。

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