不能只靠eslint校验bem类名，因其仅能捕获jsx中纯字符串classname（如classname="card__content"），对模板字面量、clsx调用、三元表达式等动态拼接完全无效，且无法验证类名是否在对应.module.scss中声明或修饰符是否符合白名单。
ESLint 本身不校验 CSS 类名，接入 BEM 规范必须分层处理：JSX 中的静态类名靠 eslint-plugin-css-modules 检查，CSS/SCSS 文件中的选择器靠 stylelint + stylelint-selector-bem-pattern 检查，而提交前只校验暂存区文件——漏掉任一环节，BEM 就形同虚设。
为什么不能只靠 ESLint 校验 BEM 类名
eslint-plugin-css-modules 只能捕获 JSX 中纯字符串形式的 className，比如 className="button__icon button--loading"；对模板字面量、clsx 调用、三元表达式拼接完全无效。它也无法判断 card__footer 是否真的定义在 card.module.scss 里，更不会校验修饰符是否在白名单中（如只允许 --primary、--disabled）。单纯依赖 ESLint，等于只守住了最表层的一道门。
如何让 stylelint 真正生效于暂存区 CSS 文件
pre-commit 钩子中直接运行 stylelint "**/*.css" 是错的——它会扫全量文件，慢且误报。正确做法是只检查本次 git add 进暂存区的变动文件：
- 用
git diff --cached --name-only --diff-filter=ACM提取新增/修改/重命名的文件 - 加
| grep '\.css$'或| grep '\.scss$'过滤出样式文件（注意单引号防 shell 展开） - 开头必须
cd $(git rev-parse --show-toplevel)切到仓库根目录，否则stylelint找不到.stylelintrc.cjs
少任何一步，钩子要么不触发，要么报 Cannot find configuration。
stylelint-selector-bem-pattern 必须配齐三项参数
只装插件不配置，等于没装。以下三项缺一不可，否则 .btn-primary、.userList 全部漏检：
-
preset: "bem"—— 不是"suit"或"css-modules"，否则规则不加载 -
componentName: "[a-z][a-z0-9-]*"—— 强制 block 名小写开头、不含大写或下划线，拒绝.Card、.user_list -
ignoreSelectors: ["/^\.js-.+$/", "/^\..+:(hover|focus|active)$/" ]—— 跳过 JS 控制类和伪类，否则.js-dropdown:hover直接报错
另外，selector-class-pattern 这类正则规则不能替代它——它只认字符串长相，不管结构合法性，比如 .card-footer 和 .card__footer 都能过，但前者根本不是 BEM。
JSX 动态类名怎么避免漏检
stylelint-selector-bem-pattern 完全不看 JS 文件，所以 className={`card__content ${size === 'lg' ? 'card__content--lg' : ''}`} 这种写法永远不报错。可行解法只有两个：
- 封装 BEM 工厂函数，例如
const b = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`，把拼写逻辑收口 - 在 CI 阶段用自定义脚本提取所有 JSX 中出现的静态类名字符串，再比对对应
.module.scss文件导出的类名列表，缺失即 fail
最容易被忽略的是：一旦类名进入模板字面量或函数调用，就彻底脱离所有静态工具视线。这时候靠 Code Review 和 PR 强制修正，比指望工具更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
