必须配置preset、componentname、ignoreselectors三项参数，否则stylelint-selector-bem-pattern无法识别bem三层语义，.btn-primary等违规写法将漏检。
不能只装 stylelint-selector-bem-pattern 就完事——没配对 preset、componentName、ignoreSelectors 这三项，.btn-primary 和 .userList 会完全逃过检查。
为什么 selector-class-pattern 规则拦不住 BEM 错误
它只是字符串正则匹配，分不清 .card__image（合法）和 .card-image（非法但可能被正则放过）。更关键的是，它不校验 block 名是否小写、是否含破折号、是否带下划线，也识别不了三层结构（block__element--modifier）的语义层级。
常见漏检情况包括：
-
.Button（首字母大写）→selector-class-pattern默认正则不拦 -
.user-list（含连字符）→ 正则若没排除连字符，就当合法 -
.card-footer（单连字符）→ 它不是 BEM，但正则可能放行
stylelint-selector-bem-pattern 必须显式配置的三个参数
插件启用后，规则仍默认“半失效”，必须手动填满以下字段：
-
preset: "bem"：不是默认值，填"suit"或留空会导致模式错位，.button__icon可能被当成普通类 -
componentName: "[a-z][a-zA-Z0-9]*"：强制 block 名小写开头、无下划线、无连字符；写成"[A-Z]+"就会允许.Button -
ignoreSelectors: ["/^\..+:(hover|focus|active|disabled|visited)$/", "/^\.ant-.+$/"]：否则.button:hover和.ant-btn全报错，开发直接卡住
CI 和 pre-commit 中如何真正阻断违规提交
本地 VS Code 提示再准也没用，开发者可以关插件、换编辑器、绕过保存校验。真正在意的只有 CI 和提交钩子。
CI 脚本里必须：
- 跑完整路径：
npx stylelint "**/*.{css,scss}"，不能只扫src/**/*.css漏掉新文件 - 加
--max-warnings 0，否则 warning 不阻断合并 - 确保配置文件在仓库根目录，且
.stylelintrc.cjs显式导出plugins和rules
pre-commit 钩子建议用 git diff --cached --name-only --diff-filter=ACM | grep '.css$' 精确查本次提交的 CSS 文件，避免全量扫描超时或崩溃。
Vue/Svelte 单文件组件里的 <style></style> 怎么生效
默认情况下，stylelint 完全忽略 <style></style> 块——这不是插件问题，是没告诉它“这里面是 CSS”。
必须做两件事：
- 安装对应处理器：
npm install --save-dev stylelint-processor-html（Vue）或stylelint-processor-svelte（Svelte） - 在
.stylelintrc.cjs中加processor: "stylelint-processor-html"字段
另外注意：SCSS 嵌套写法如 .card { .header { } } 编译后是 .card .header，破坏 BEM 封装性，工具链无法反推来源，这类写法必须禁用并平铺书写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
