CSS BEM命名法让Code Review更轻松，因可直接通过类名是否严格匹配block__element--modifier三段式结构（如product-card__price--discount）快速判断合规性，而.title、card-title、button--primary--loading等均违规。
直接看类名是否匹配 block__element--modifier 三段式结构
Code Review时不用翻HTML或CSS源码，只扫一眼class属性值就能判断合规性。合法写法必须严格满足：小写字母开头的块名 + 双下划线 + 元素名 + 双短横 + 修饰符（可选），中间不能有空格、单下划线、单短横或驼峰。
常见违规现象：
-
.title、.header——裸类名，无block归属，直接打回 -
.card-title、.user_list——用连字符或单下划线分隔，__和--缺一不可 -
.button--primary--loading——修饰符嵌套，违反“单一状态”原则，应拆成.button--primary.button--loading -
.product-card__price--discount✅ 合规；.product-card__price--discount--large❌ 超出可维护边界
检查块名是否具备业务语义且真实存在于DOM中
BEM的block不是抽象概念，必须对应页面中一个真实、语义明确的容器节点。如果审查时看到.section-2、.wrapper、.container这类名字，基本可以判定为违规——它们不携带业务信息，也无法在HTML里准确定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开DevTools，选中该元素，确认其class是否以
xxx开头，且该xxx类确实出现在该元素自身上（而非父级） - 块名应与组件文件名对齐：React组件叫
UserCard.jsx，对应CSS块就该是.user-card - 禁止用
.Card或.USER_CARD——componentName正则必须限定为[a-z][a-zA-Z0-9]*
警惕Element嵌套和跨Block复用
BEM不允许__层级超过一层，也不允许同一个Element类名出现在不同Block上下文中。这类问题人工易漏，但一旦发生，重构时会连锁失效。
典型高危点：
-
.card__header__title——非法三层，应改为.card__title或拆出新Block.title-block -
.card__icon出现在<div class="modal">...</div>里——Element脱离所属Block，样式归属断裂 -
.button__icon和.card__icon共用同一套图标样式？错。应升为独立Block：.icon+.icon--in-button -
.card__title--small和.card--small混用——尺寸修饰符挂错层级，影响范围失控
用stylelint-selector-bem-pattern实时拦截，但别信默认配置
VS Code里装了插件却没报错？大概率是配置漏项。这个插件不开关键参数等于没开。
必须显式配置的三项：
-
preset: "bem"——不写就走默认宽松模式，.btn-primary都过得了 -
componentName: "[a-z][a-zA-Z0-9]*"——否则.Button、.user-list全被放过 -
ignoreSelectors: [/^\.js-/, /^\.is-/, /^\.has-/]——不加这条，.js-dropdown和.is-open天天误报
工具链能放大BEM优势，但前提是它真在跑。改完配置后，故意写个.header__logo__icon，看是否立刻标红——不报错，说明PostCSS链路或VS Code语言服务没接通。
