必须用工具实时高亮+PR强制拦截，因BEM分隔符、层级、大小写规则过细，人工无法可靠识别user-card__header--large漏__、button--loading缺基础类、card__content__title非法三级嵌套等硬伤。
靠人眼扫类名结构基本无效，必须用工具实时高亮+PR阶段强制拦截——BEM的分隔符、层级、大小写规则太细，人工过PR时根本来不及验证.user-card__header--large是否漏了__、button--loading有没有带基础类、card__content__title是不是非法三级嵌套。
一眼识别违规类名的三个硬性特征
不用查文档，直接看类名本身是否同时满足以下三点。任一不满足，就是BEM违规：
-
block部分必须小写字母开头，只含小写字母和短横线（search-form✅，UserCard❌，user_card❌） - 元素和修饰符之间必须用
__或--严格分隔（modal__body✅，modal_body❌，modal__body--large✅，modal__body-large❌） - 不能出现
__和--混用、嵌套、省略（card__title--error--dark❌，form-field__input❌，button--primary__text❌）
为什么VS Code里写错menu__item--active会立刻标红
不是靠拼写检查，而是Stylelint插件在编辑器里实时调用stylelint-selector-bem-pattern规则。它不只匹配字符串，还解析BEM语义层级：
- 装了插件但没反应？大概率
settings.json里没开"stylelint.validate": ["css","scss"] - 写
.btn-primary不报错？说明plugin/selector-bem-pattern规则根本没启用，或者preset没设成"bem" - 写
.card__footer__link标红提示“Element nesting not allowed”？说明插件正确识别了非法三级结构
PR里最常漏检但必须阻断的三类错误
这些错误人眼几乎无法可靠捕获，CI必须设--max-warnings 0直接拒绝合并：
- 修饰符单独使用：
class="button--loading"没带button基础类，删掉修饰符后样式全丢 - 分隔符错位：
.user-card__item（block用短横线，element却用双下划线），stylelint-selector-bem-pattern直接失效 - 块名含位置词：
.homepage-banner或.top-nav，违反“block必须是可复用业务组件”的本质
真正难的不是写出合规类名，而是让componentName正则锁死大小写和分隔符、让ignoreSelectors精准跳过JS钩子类、让CI只校验暂存区文件——少一个环节，整个BEM约束链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
