使用SCSS Modules时的BEM嵌套命名规范合理性疑问

关于card__header-title是否违背BEM规范 #

BEM的核心规则是块__元素--修饰符，明确禁止的是block__element__nested这种多层下划线嵌套的写法——这会把元素定义成嵌套关系，违背BEM“元素是块的直接组成部分”的核心逻辑。

而card__header-title这种用连字符命名元素的方式，并不违反规范：这里的header-title本质上是card块下的一个独立元素名，连字符只是用来辅助表达它和header的关联语义，并没有把元素拆成嵌套结构，完全符合BEM的命名规则。

社区是否有此类用法 #

这种写法在社区里非常普遍，尤其是结合SCSS/SCSS Modules的嵌套语法时，是很多团队的常用方案。比如在SCSS里可以这么写：

.card {
  &__header {
    padding: 16px;
    
    &-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
}

编译后生成的类名就是.card__header-title，既在样式文件里保留了DOM层级的直观性，又没有破坏BEM的核心规范。

两种写法的取舍建议 #

• 第一种写法（card__header-title）：样式层级清晰，能快速对应DOM结构，但元素命名和DOM层级绑定较紧，如果后续结构调整（比如把title从header移到其他区域），需要同步修改类名。适合结构稳定、需要强可读性的组件。
• 第二种写法（card__title）：元素独立性强，结构变动时无需修改类名，但样式文件里无法直接看出元素的DOM位置，复杂组件里可读性会打折扣。适合结构灵活、元素语义和层级无关的场景。

内容的提问来源于stack exchange，提问作者lead.eg