必须用stylelint-selector-bem-pattern插件自动拦截，因selector-class-pattern仅字符串匹配，无法识别bem语义层级，如.card__image__icon、.card__title等非法结构均不报错；该插件须严格配置preset、componentname、ignoreselectors三项参数，缺一不可。
人工扫类名基本无效，必须靠 stylelint-selector-bem-pattern 插件在 CI 和编辑器里自动拦截——否则 .card-footer、.button--blue、.user_card 全部过检，等上线才发现样式错乱。
为什么不能只用正则校验 selector-class-pattern
它只做字符串匹配，不理解 BEM 的语义层级：
-
.card__image__icon（非法三级嵌套）不会报错 -
.Card__title（大写 Block）或.card__UserAvatar（驼峰 Element）默认放过 -
.card__footer写成.card-footer也能通过，但实际违反双下划线约束 - 完全不验证
.card__header是否真有对应.card块定义
stylelint-selector-bem-pattern 必须配齐三项参数
少一个就等于没开规则，常见配置失效都是这里漏了：
-
preset: 'bem'：必须显式写，不能留空或填'suit' -
componentName: '[a-z][a-z0-9]*'：强制 block 小写、无连字符，拦掉.UserCard和.user-card -
ignoreSelectors：必填，否则.button:hover、.js-dropdown全被误标；至少包含'/^\.js-.+$/'和'/^\..+:(hover|focus|active|disabled)$/'
VS Code 和 pre-commit 阶段怎么真正起作用
装了插件却没报错？大概率是链路断了：
- VS Code 要确认安装了官方 Stylelint 扩展（作者 Shinnosuke Watanabe），并在
settings.json中启用："stylelint.enable": true、"stylelint.validate": ["css","scss","less"] - pre-commit 钩子别跑全量：
git diff --cached --name-only --diff-filter=ACM | grep '.css$' | xargs stylelint，只查本次提交的 CSS 文件 - Vue/Svelte 单文件组件里的
<style></style>默认不扫描，得加processor: 'stylelint-processor-html'并确保文件语言模式是 Vue/HTML
最常被忽略的是 componentName 正则没禁大写，和 ignoreSelectors 没配全——这两个一错，整个 BEM 校验就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
