Stylelint --fix 对 BEM 规则完全无效，因其所有语义性校验（如 block__element--modifier 结构）均被标记为 non-autofixable；它仅能修复缩进、引号等纯格式问题，而类名语义转换必须人工判断。
Stylelint 本身不支持自动修复 BEM 命名违规，强行开启 --fix 对 plugin/selector-bem-pattern 无效，且可能破坏代码逻辑。 它能修复的只有缩进、引号、分号等格式类规则；而 .userList → .user-list__item 这类语义转换必须人工判断，工具无权决定 block 名是否该叫 user 还是 user-list。
为什么 stylelint --fix 对 BEM 规则完全没反应
因为 plugin/selector-bem-pattern 的所有规则（如 block__element--modifier 结构校验）均被标记为 non-autofixable。Stylelint 官方明确区分两类规则：
- 可修复：仅限纯格式问题，如
color-hex-case、indentation、declaration-block-trailing-semicolon - 不可修复：所有涉及语义、结构、业务含义的规则，包括
selector-class-pattern和全部plugin/selector-bem-pattern子规则
你执行 stylelint "**/*.css" --fix 后发现 BEM 报错依旧存在，不是配置错了，而是它本来就不该修。
真正有效的“自动”落地方式：保存时实时拦截 + 提示补全
与其指望修复，不如让错误在写入文件前就被挡住，并降低手敲出错概率：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- VS Code 必须启用
Stylelint官方扩展（作者 Shinnosuke Watanabe），并在settings.json中确认："stylelint.enable": true和"stylelint.validate": ["css", "scss", "vue"] - 搭配
BEM Helper插件：输入card回车，自动展开card__title、card--hover等合法变体，避免手动拼错 - React 项目中禁用字符串拼接，改用
clsx封装常量对象：const card = { base: 'card', title: 'card__title' }，调用clsx(card.base, { [card.title]: isExpanded })
CI/Pre-commit 阶段如何防止非法 BEM 混入主干
本地拦截只是第一道关，提交和构建阶段必须强制阻断：
- pre-commit 脚本里不要跑全量：
stylelint "**/*.css"会慢、不准、易崩溃；应只查暂存区变更：git diff --cached --name-only --diff-filter=ACM | grep '.css$' | xargs stylelint - CI 流程中禁止
--fix参数——它不会自动git add，反而导致违规代码照常提交，污染工作区 - 配置里显式排除伪类和第三方类：
ignoreSelectors: ["/^\..+:(hover|focus|active|disabled)$/", "/^\.ant-.+$/"]，否则.btn:hover或.ant-btn会被误报
最常被忽略的一点：Vue/Svelte 单文件组件里的 <style> 块默认不被 Stylelint 处理，不是插件失效，而是没告诉它“这里面是 CSS”。必须安装对应 processor（如 stylelint-processor-html）并在配置中声明 processor: "stylelint-processor-html"，否则 <style scoped> 里的 .user-card__avatar 永远不会被校验。
