是，ci中stylelint未阻断提交是因为stylelint-selector-bem-pattern规则未显式启用且三项参数（preset、componentname、ignoreselectors）缺一不可；仅设preset: 'bem'无效，必须完整配置才能精准校验bem结构并拦截非法类名。
CI里stylelint报错但没拦住提交，是不是配置漏了？
不是插件没装，而是stylelint-selector-bem-pattern默认不启用，必须显式开启规则且配全三项参数。只写preset: 'bem'不够，缺一不可。
-
componentName必须设为^[a-z][a-z0-9-]*$——放行user-card，拒绝UserCard或card-item -
ignoreSelectors至少包含[/^\..+:(hover|focus|active|disabled)$/]，否则.button:hover直接被误判为非法 -
preset字段不能省略，也不能填'suit'或'css-modules'，只有'bem'才解析block__element--modifier三层结构
为什么grep class="xxx"没发现违规类名，但回归测试还是挂了？
因为HTML里写的类名合规，但JS里手拼的不合规。比如className={`card ${isLarge ? 'card--large' : ''}`看似没问题，但card--large缺少基础块名card时单独使用，就破坏BEM语义——它本该是card card--large。
- ESLint用
no-restricted-imports拦截import styles from './Card.module.scss'，强制走封装函数 - 组件内导出
useCardClasses这类工具函数，返回对象而非字符串，避免classList.add('card--large')这种裸调用 - TS接口里把modifier值约束为枚举：
size: 'sm' | 'md' | 'lg'，禁止传'200px'或'v2'
老项目接入时，CI突然爆几百个错误怎么办？
别关检查、别调宽松正则——那是把问题藏进技术债。正确做法是分阶段卡点：先让CI只对新增CSS文件生效，再用postcss-selector-parser扫描出所有深度>3的选择器，人工收敛。
- 在
stylelint.config.js里加ignoreFiles: ['src/legacy/**/*.scss']，隔离旧代码 - 用
html-validate在CI中加第二道校验，规则class-pattern设为^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$，比stylelint更早拦截HTML层硬编码 - VS Code装
BEM Helper插件，开发者敲bem自动补全block__element--modifier，降低误写概率
第三方组件类名（如Ant Design）会触发BEM检查吗？
会，但不该拦——它们是黑盒，你改不了。关键是在校验范围里明确排除，而不是放任不管。
- 在
stylelint配置的ignoreFiles里加node_modules/**和src/lib/antd.css - HTML校验用
html-validate的class-ignore规则，匹配^ant-、^el-等前缀，避免误伤 - 业务代码里用
[data-scope="user-profile"] .ant-input限定作用域，既不破坏BEM边界，又防止全局污染
el.classList.add('active')或className="btn primary"，BEM就只是装饰。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
