Code Review时可一眼识别class是否合规：直接看类名是否严格匹配block__element--modifier三段式结构，如product-card__price--discount正确，而.title、card-title、button--primary--loading均违规。
Code Review时怎么一眼看出class改得对不对
因为BEM类名自带三层上下文：块归属、元素角色、当前状态。看到product-card__price--discount，不用翻HTML就能确认——这是product-card模块里的价格元素，正展示折扣态，样式只作用于该组件内。
常见错误现象：.title这种泛义名在CR里必须打回；card-title缺双下划线，不是BEM；button--primary--loading是复合修饰符，违反“修饰符不可嵌套”原则。
- 块名必须是业务语义词（
search-form✅，form❌） - 元素名不能单独出现（
__header非法，必须是modal__header） - 修饰符只描述状态（
--disabled✅，--bg-red❌）
为什么BEM能让审查者跳过HTML上下文
传统写法如.error-label或.form .label.error，Review时得切到Elements面板反复验证DOM结构是否匹配；BEM把结构信息编码进名字里，form-field__label--error直接表明它是表单字段模块里的标签，且处于报错态。
工具链能进一步放大这个优势：VS Code插件保存即高亮user-card-avatar-large这类非标准写法；CI阶段用stylelint-selector-bem-pattern拦截.card .card__title这种带空格的选择器。
立即学习“前端免费学习笔记（深入）”；
- 禁止标签选择器（如
form-field p），否则无法定位样式归属 - 禁止跨块组合类名（如
header__button--submit），按钮应为独立button块 - 所有修饰符必须和基础块共存（
button--primary单独出现属于逻辑错误）
BEM审查中最容易被忽略的三个高危点
这三类违规不靠工具很难人工发现，但直接影响可维护性：
-
card card--featured写在HTML里，但CSS只写了.card--featured——删掉修饰符，整个组件样式崩塌 -
card__title出现在非card容器中，或写成card__header__title——BEM不允许Element嵌套Element -
button--width-200px把具体值塞进类名——换单位或加媒体查询就得新增一堆类，违背修饰符只描述状态的原则
BEM不解决CSS层叠顺序问题。如果.card__title--large和.card__title--small冲突，不是命名错了，而是引入顺序或权重没管住——它只管名字，不管谁覆盖谁。
