回归测试中样式错位等问题大概率源于css类名被意外覆盖或复用；bem本身不防冲突，需靠stylelint-selector-bem-pattern插件配合三项硬配置（componentname、ignoreselectors、preset）才能真正拦截非法类名，缺一不可。
回归测试失败如果集中在样式错位、按钮变色、卡片尺寸异常这类问题，大概率不是逻辑改错了，而是 CSS 类名被意外覆盖或复用——BEM 本身不防冲突，stylelint-selector-bem-pattern 才是真正卡住问题的第一道闸。
为什么 stylelint 默认不拦住 .btn--large 这类错误写法
默认的 stylelint-config-standard 完全不管类名结构，它只查 color 拼错没、margin 单位对不对。像 .btn--large 这种写法，只要正则没配，它就当合法；更危险的是 .user-card__avatar--large--dark，双 modifier 看似能跑通，实则让后续修改失去可预测性。
必须手动装插件并启用规则：
- 运行
npm install stylelint-selector-bem-pattern --save-dev - 在
stylelint.config.js的plugins数组里加'stylelint-selector-bem-pattern' - rules 中显式开启：
'plugin/selector-bem-pattern': { preset: 'bem' }
漏掉任一环，CI 里 stylelint 就等于没开。
三个必配参数填错一个，BEM 检查就形同虚设
plugin/selector-bem-pattern 不是开个开关就行，它依赖三项硬配置才能识别真实 BEM 结构。常见失效场景就是只写了 preset: 'bem'，其他全靠默认。
-
componentName必须设为'[a-z][a-z0-9-]*'：否则.UserCard或.user-card都会被放过，而 BEM 要求 block 名小写且无破折号 -
ignoreSelectors至少包含['/^\..+:(hover|focus|active|disabled)$/']：不然.button:hover会被当成非法选择器报错 - 不能省略
preset字段，也不能写成'suit'或'css-modules'：只有'bem'才启用block__element--modifier三层解析
错误示例：componentName: '[A-Za-z]+' 表面看能匹配大小写，实则放行了 .Button，直接破坏 BEM 小写约定。
如何让开发者没法绕过 BEM 规则
工具链再严，只要人还能手拼字符串，规则就只是摆设。关键不是“禁止什么”，而是“只允许什么”。
- 禁用直接导入
.module.scss：用 ESLint 的no-restricted-imports拦截import styles from './Button.module.scss' - 组件内只暴露 class 工具函数：如
useButtonClasses({ size: 'lg', loading: true })，返回对象而非字符串 - 所有 modifier 值必须原子化：用 TS 枚举约束
size: 'sm' | 'md' | 'lg'，禁止传'200px'或'v2' - HTML 层用
html-validate加第二道卡：规则class-pattern设为^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$，拒绝单下划线和大写字母
真正难的不是写对一个 card__title--highlight，而是确保第 37 次提交时，新人写的 search-form__submit--loading 和第一天的语义层级完全一致——这靠文档说不清，只能靠工具锁死路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
