eslint本身不处理css类名校验，必须依赖eslint-plugin-css-modules等插件；它仅能捕获纯字符串类名（如classname="card__content"），对模板字面量、变量拼接或函数调用生成的类名完全无效，因无法静态推断js逻辑。
能，但只检查静态字符串，对模板字面量和变量拼接完全无效。
JSX里哪些BEM类名ESLint能抓到
ESLint本身不处理CSS类名校验，必须靠插件。真正起作用的是 eslint-plugin-css-modules 配合自定义规则，或者用 stylelint-selector-bem-pattern（需通过 stylelint 运行，不是ESLint原生能力）。
- ✅ 能捕获：
className="card__content card--loading"这种纯字符串写法 - ❌ 抓不住：
className={`card__content ${size === 'lg' ? 'card__content--lg' : ''}`}—— 模板字面量 + 三元运算，ESLint无法执行JS逻辑 - ❌ 抓不住：
className={clsx('card__content', { 'card__content--lg': size === 'lg' })}—— 函数调用结果不可静态推断
为什么不能依赖ESLint做完整BEM校验
BEM语义正确性 ≠ 字符串格式合规。ESLint插件最多验证“card__content 是否出现在 card.module.scss 文件中声明过”，但无法判断：
- 这个
card__content是否真的属于当前组件的DOM结构（比如误写在modal组件里） -
card--featured的--featured是否在团队约定的修饰符白名单里（如只允许--primary、--disabled） - JSX里写的
card__icon，对应SCSS文件里是否漏写了.card__icon声明（导致样式丢失）
真正有效的BEM校验组合
单靠ESLint永远不够，必须分层拦截：
- 开发时：VS Code装
BEM Tools插件，输入.card__自动补全已声明元素，减少手误 - 保存时：
stylelint+stylelint-selector-bem-pattern校验SCSS文件内声明的类名是否符合BEM结构（注意：它不看JSX，只扫.module.scss） - CI阶段：用自定义脚本比对JSX中出现的所有
className字符串和对应模块SCSS文件导出的类名列表，缺失即报错 - 运行时（可选）：在开发环境加一层
console.warn，当className包含未在模块中定义的BEM片段时提示（需提前提取模块类名映射）
最常被忽略的一点：BEM类名一旦进入JSX字符串拼接或函数生成流程，就脱离了所有静态工具的视线。这时候靠文档、Code Review和新人PR强制改历史类名，比指望工具更实在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
