必须启用stylelint-selector-bem-pattern插件并设styleType为"bem"，配置componentName、ignoreSelectors等参数，CI中执行npx stylelint "*/.{css,scss,less}"且--max-warnings 0，方可真正拦截.button__icon等BEM违规写法。
靠文档和口头约定推BEM，基本等于没推——团队里很快就会出现 .btn、.card__header--large--dark、.user-card .avatar 这类写法，不是开发者不配合，是没人知道“什么算错”，更没人能实时拦住。
stylelint-selector-bem-pattern 必须开 strict 模式
装插件不等于生效。默认配置下它只报明显错误，比如 _input 或 CardTitle，但放行 .button--primary（缺 block）、.search-form__input_error（单下划线）这类典型违规。
-
styleType必须设为"bem"，不能用"suit"或"itcss"混淆语义 -
componentName要限制为小写字母+连字符：[a-z][a-z0-9-]*，禁用大驼峰、下划线开头、数字开头 - 加
ignoreSelectors: ['html', 'body']避免误伤全局重置规则
CI 中必须用 --max-warnings 0 强制阻断
Warning 不等于 error，很多团队配置了 stylelint 却仍合入大量 BEM 问题，就是因为 CI 脚本漏了 --max-warnings 0。
- 构建命令要写成：
npx stylelint "**/*.{css,scss,less}" --max-warnings 0 - 路径通配符必须覆盖所有样式后缀，老项目若混用
.styl或.pcss，得显式加上 - PR 检查失败时，日志里要能直接看到哪行写了
.header .logo或.btn-primary
禁止手拼类名，提供封装函数替代
开发者写 className={`card ${isFeatured ? 'card--featured' : ''}`}，不是懒，是工具没给更顺的路。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 导出统一的 class 工具函数，例如
useSearchFormClasses({ inputDisabled: true })，返回{ input: 'search-form__input search-form__input--disabled', button: 'search-form__button' } - ESLint 规则
no-restricted-imports拦截直接import styles from './SearchForm.module.scss' - modifier 值必须原子化：允许
search-form__button--primary，禁止search-form__button--bg-blue-500
老代码豁免但新组件零容忍
一刀切迁移会卡死开发节奏。关键是把校验范围精准锚定在新增代码上。
- 在
.stylelintrc.js中用overrides只对src/components/**/*.{css,scss}生效 - 目录即 block 名：新建
user-profile-card/目录，就只允许出现user-profile-card、user-profile-card__avatar、user-profile-card--compact - 泛义块名如
main、content、box在 ESLint + stylelint 双重规则中直接报错
真正难的不是写对一个 modal__close--disabled，而是让每个新人第一次提交 PR 就被机器明确告诉：“modal-close--disabled 缺 element 层级，应为 modal__close--disabled”——这需要三处同步：编辑器提示、本地 lint、CI 拦截，少一环，规范就断在第一公里。
