必须安装stylelint-selector-bem-pattern插件并严格配置preset、componentName、ignoreSelectors三项参数，否则.btn-primary等非BEM写法零报错；内置selector-class-pattern仅正则匹配，无法识别block__element--modifier三层语义结构。
适合，但必须装 stylelint-selector-bem-pattern 插件并配齐三项参数，否则 stylelint 对 BEM 命名完全无效——.btn-primary、.userList、.CardHeader 全部零报错。
为什么默认 stylelint 配置拦不住非 BEM 类名
stylelint 内置的 selector-class-pattern 只做字符串正则匹配，不理解 block__element--modifier 的三层语义结构。它能把 .card__title 和 .card-title 当成一样合法，也能放过 .userList（只要正则没禁大写）。
真正能识别 BEM 结构的只有 stylelint-selector-bem-pattern 插件，它会校验：
-
.card__header__icon→ 非法三级嵌套，报错 -
.card__card-title→ element 名含冗余 block 语义，报错 -
.card--loading→ modifier 值为实现细节，建议拦截（靠componentName+ 自定义规则配合）
必须配齐的三个配置项
只在 plugins 里加插件、rules 里启用 plugin/selector-bem-pattern 不够，漏掉任一字段规则就形同虚设：
-
"preset": "bem"：必须是字符串"bem"，填"suit"或留空都不生效 -
"componentName": "[a-z][a-zA-Z0-9]*"：强制 block 名小写开头、不含_或-，否则.UserCard或.user-card都可能被放过 -
"ignoreSelectors": ["/^\..+:(hover|focus|active|disabled|visited)$/", "/^\.ant-.+$/"]：跳过伪类和第三方库类名；注意双反斜杠转义，写成/.+:(hover)/会直接导致配置解析失败
Vue/Svelte 单文件组件里的 CSS 怎么扫到
stylelint 默认只处理独立 .css、.scss 文件，.vue 里的 块不会被扫描。
- 装对应处理器：
npm install --save-dev stylelint-processor-html（Vue）或stylelint-processor-svelte（Svelte） - 配置里加
processor: 'stylelint-processor-html' - VS Code 中确认当前文件语言模式是
Vue（不是HTML），否则扩展不触发 - 别用
stylelint "**/*.vue"全量扫——它默认不进，得显式指定处理器才生效
pre-commit 钩子里怎么精准检查新增 CSS
跑 stylelint "**/*.{css,scss,vue}" 会把历史遗留问题全翻出来，掩盖本次提交的真实违规点。
- 脚本开头先
cd $(git rev-parse --show-toplevel)切到仓库根目录 - 用
git diff --cached --name-only --diff-filter=ACM | grep -E '.(css|scss|vue)$'提取暂存区变更文件 - 管道传给
stylelint，例如：xargs stylelint - 绝对不要加
--fix：它改完不git add，下次提交照样失败；BEM 命名问题也基本无法自动修复
真正卡住 BEM 落地的从来不是工具链能力，而是 componentName 正则是否禁掉大写字母、ignoreSelectors 是否覆盖了所有伪类和第三方前缀——这两处写错，CI 就等于没开检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
