必须安装stylelint-selector-bem-pattern插件并严格配置preset、componentname、ignoreselectors三项参数，否则.btn-primary等非bem写法零报错；selector-class-pattern仅正则匹配字符串，无法校验语义合法性与结构归属关系。
直接看 stylelint-selector-bem-pattern 的 CI 报错率和修复周期，比人工抽检准得多——它不认“差不多”，只认正则匹配结果；类名错一个下划线（如 user_name）或少一个横线（如 card-header），就完全跳过校验，等于在工具链里开了个黑洞。
用 stylelint 扫出真实违规数，别信“90% 符合”这种估算
执行一次全量扫描，不是看有没有报错，而是统计三类关键数据：
-
grep -r "\.[a-z]\+ \.[a-z]" src/找出所有含空格的选择器（如.card .card__content），这类写法会触发 DOM 回溯，是性能隐患源头 - 运行
npx stylelint "**/*.{css,scss}" --report-needless-disables，看有多少规则被手动/* stylelint-disable */绕过——高频 disable 往往说明命名设计本身有冲突 - 检查
plugin/selector-bem-pattern报错中 modifier 类名是否含双短横（如btn--large--v2），这暴露了修饰符叠加失控，不是规范没执行，而是语义没理清
HTML 中 BEM 类的“混用密度”比错误数更危险
光查 CSS 文件不够，BEM 失效常发生在 HTML 层：新旧类名并存、块名不一致、元素脱离块上下文。重点盯这些信号：
- 同一 DOM 节点同时出现
.user-list__item和.item——说明老类名还在新增，规则已形同虚设 -
.header__logo出现在<footer></footer>里 ——Block 边界被破坏，后续无法复用或提取 - 元素类单独出现，没有对应块类：
<span class="card__title"></span>但外层没有class="card"——Element 失去语义锚点，IDE 跳转、搜索全部失效
DevTools Performance 面板里藏了最硬的证据
BEM 规范执行不到位，最终会反映在渲染性能上。打开 Chrome DevTools → Performance → 录制页面交互（比如快速展开折叠菜单），停止后重点关注：
- “Recalculate Style” 任务是否频繁出现，单次耗时是否 >8ms（非 16ms，低端 Android 设备更敏感）
- 调用堆栈里是否大量出现
.list .item .content这类后代选择器 —— 它们不是 BEM 写的，但常由 BEM 模糊导致 JS 动态加类时意外拼出 - hover/focus 状态切换是否引发样式重算暴增 —— 很可能用了
.card__title:hover这种伪类写法，浏览器被迫做回溯匹配
真正难控的不是写错一个 __，而是当 button__icon 在按钮、导航、弹窗里被复用时，没人确认它该是 Element 还是独立 Block；这种边界模糊会让所有工具失效，也最难在报表里量化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
