必须安装并严格配置stylelint-selector-bem-pattern插件，否则.stylelint对BEM完全无效；需在plugins中声明、rules中启用plugin/selector-bem-pattern规则，且preset必须为"bem"、componentName须为"a-z*"、ignoreSelectors必填以排除伪类和第三方类名。
stylelint-selector-bem-pattern插件必须手动装、手动配
不装这个插件，stylelint对BEM命名就是睁眼瞎——.btn-primary、.userList、.CardHeader全都能过，连报错都不会有。它不是开箱即用的规则，而是独立插件，且依赖三项硬配置才能生效：
-
plugins数组里必须显式加入'stylelint-selector-bem-pattern' -
rules中必须写'plugin/selector-bem-pattern'并设preset: 'bem'（不能留空，也不能填'suit'） -
componentName必须是'[a-z][a-zA-Z0-9]*'，否则.Button或.user-card会被放过
ignoreSelectors不配就会误报伪类和第三方类名
写了.button:hover或.ant-btn就红标？不是规则错了，是你没告诉插件“哪些可以跳过”。ignoreSelectors不是可选项，是必填项，否则检查逻辑会把合法伪类当成非法结构：
- 至少包含
"/^\..+:(hover|focus|active|disabled|visited)$/"（注意双反斜杠转义） - 第三方组件库类名建议也加进去，比如
"/^\.ant-.+$/"或"/^\.el-.+$/" - 正则必须用字符串形式，不能写成
/.js-.+/这种裸正则——stylelint会直接报配置解析失败
Vue/Svelte单文件组件里的
在.vue文件里写.card__header却没报错？不是插件失效，是stylelint根本没扫描那段CSS。它默认只处理独立.css、.scss文件：
- 装对应处理器：
npm install --save-dev stylelint-processor-html（Vue）或stylelint-processor-svelte（Svelte） - 配置里加字段：
processor: 'stylelint-processor-html' - VS Code里确认当前文件语言模式是
Vue（不是HTML），否则扩展不会触发
pre-commit钩子里只查本次改动的CSS文件
跑stylelint "**/*.css"不仅慢，还容易因路径过长崩溃，更关键的是：它会把历史遗留问题一并报出来，掩盖真正要提交的违规代码。正确做法是精准过滤：
立即学习“前端免费学习笔记（深入）”；
- 脚本开头先
cd $(git rev-parse --show-toplevel)切到仓库根目录 - 用
git diff --cached --name-only --diff-filter=ACM | grep '.css$'提取暂存区CSS文件 - 管道传给
stylelint，例如：xargs stylelint - 绝对不要加
--fix：它改完不git add，下次提交照样失败
真正卡住BEM规范的从来不是工具能力，而是componentName正则是否禁掉大写字母、ignoreSelectors是否覆盖了所有伪类变体、以及processor是否适配了框架的样式嵌入方式——少一个，检查就漏一片。
