必须启用stylelint-selector-bem-pattern插件并完整配置styleType、componentName、ignoreSelectors三参数，否则无法识别BEM语义；selector-class-pattern等内置规则无法替代；CI需加--max-warnings 0，Vue/Svelte需配对应processor。
不装 stylelint-selector-bem-pattern 插件，仅靠 Stylelint 内置规则根本拦不住 .btn-primary、.userList 这类非 BEM 写法——它压根识别不了 block__element--modifier 的语义结构。
必须启用 stylelint-selector-bem-pattern 插件并填全三个关键参数
这个插件不是“开了就行”，漏掉任一参数都会让规则失效。常见错误是只写 styleType: "bem"，却忽略 componentName 和 ignoreSelectors：
-
styleType必须显式设为"bem"（不能留空、不能填"suit"或"itcss"），否则模式错位，.card__image和.card-image全被当成合法 -
componentName要强制块名小写开头、禁用下划线和破折号，推荐正则"[a-z][a-zA-Z0-9]*"；若写成"[A-Z]+"，.Button就会逃过检查 -
ignoreSelectors必须显式排除伪类，否则.button:hover直接报错；建议值为["/^\..+:(hover|focus|active|disabled|visited)$/", "/^\.ant-.+$/"]，把第三方类也豁免掉
selector-class-pattern 规则无法替代插件，别被正则误导
有人试图用内置的 selector-class-pattern 配正则硬套 BEM，结果 .header-title、.user_name 全部漏检。原因很直接：
- 它只做字符串匹配，分不清
.card__body（合法）和.card-body（非法但正则可能放过） - 它不校验 block 名是否小写开头，
.Card、.USER-card都能过 - 它对修饰符顺序、嵌套、多连字符等 BEM 特有语义完全无感
CI 中必须加 --max-warnings 0，否则等于没拦
很多团队配了插件，CI 脚本里却只跑 npx stylelint "**/*.{css,scss}"，结果报一堆 warning 就继续合并——违规代码照进主干。实际要：
- 命令末尾加
--max-warnings 0，把 warning 当 error 处理 - 路径范围建议收窄到新代码区，比如
"src/components/**/*.{css,scss}"，老代码用overrides豁免 - pre-commit 钩子中别扫全量文件，改用
git diff --cached --name-only | grep '.css$'只查本次提交的 CSS
Vue/Svelte 单文件组件里的
VS Code 里看着有提示，但 CI 里 里的类名完全不校验，因为 Stylelint 默认不解析 SFC 中的样式块。必须两步走：
- 安装对应处理器：
npm install --save-dev stylelint-processor-html（Vue）或stylelint-processor-svelte（Svelte） - 在
.stylelintrc.js中加字段：processor: "stylelint-processor-html"，且确保文件语言模式设为vue
真正卡住 BEM 违规的不是正则有多复杂，而是 componentName 是否禁掉大写开头、ignoreSelectors 是否覆盖伪类和第三方类、CI 是否真把 warning 当 error——这三个点，少一个，.button__icon_error 就能顺利合入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
