bem类名必须严格遵循block__element--modifier三段式结构，分隔符不可替换；禁用泛义块名、禁止元素名单独出现、修饰符不得嵌套或含样式值，所有命名须具备自解释性。
Code Review时怎么快速判断一个class是否合规
直接看类名结构：必须严格匹配 block__element--modifier 三段式，且分隔符不能错。比如 user-card__avatar--large 合规，user-card-avatar-large 或 userCard__avatar--large 都会触发 stylelint-selector-bem-pattern 报错。
常见错误现象：card-title 被当成元素名提交，但实际缺双下划线；button--primary--loading 是复合修饰符，违反“修饰符不可嵌套”原则，应拆成 button--primary button--loading。
- 块名（block）必须是独立语义单元，禁用泛义词如
section、container - 元素名（__element）不能单独出现，
__header是非法的，必须带前缀如modal__header - 修饰符（--modifier）只描述状态或变体，禁止含样式值，
button--bg-red错，button--danger对
为什么BEM能让Review者跳过HTML上下文直接理解样式意图
因为类名本身携带三层上下文：模块归属（form-field）、子元素角色（__label）、当前状态（--error）。Review时看到 form-field__label--error，不用打开对应 HTML 就能确认：这是表单字段里的标签元素，处于报错态，样式逻辑只作用于该组件内。
对比传统写法：.error-label 完全无法判断归属，.form .label.error 依赖 DOM 层级，一旦结构微调就失效，Review时还得切到 Elements 面板反复验证。
- 禁止使用标签选择器（如
form-field p），否则 Review 时无法定位样式归属 - 禁止跨块组合类名（如
header__button--submit），button 应为独立 block，正确写法是button button--submit - 所有修饰符必须和基础块名共存，
button--primary单独出现属于逻辑错误
工具链怎么把BEM规则“焊死”在PR流程里
靠人工盯类名效率低还容易漏，必须让机器在提交前拦截。核心是三道卡口：保存时 VS Code 插件高亮、提交时 pre-commit hook 校验、CI 构建时 stylelint 全量扫描。
实操建议：
- VS Code 安装
BEM Helper插件，输入card回车自动补全card__header、card--fluid等候选，减少手误 - pre-commit hook 中运行
npx stylelint "**/*.css" --fix，自动修正简单格式问题（如空格、大小写） - CI 阶段强制执行
stylelint "**/*.{css,scss}" --max-warnings 0，任何 BEM 违规直接阻断合并
注意：不要在 SCSS 中用 &__item { &__text { ... } } 这种嵌套，它生成的 CSS 仍隐含结构依赖，且 IDE 无法准确跳转到 card__text 定义处——这会让 Review 失去静态可追溯性。
多人协作中哪些BEM细节最容易在Review时被忽略
最常漏检的是修饰符的隐含约束和元素名的语义纯度。比如 card--featured 要求必须配合 card__image 使用，否则布局错位；又比如把 user-card__delete-btn 写成 user-card__action--delete 才符合“描述行为而非样式”的原则。
这些细节不会触发 stylelint 报错，但会削弱 BEM 的自解释能力。Review 时需重点检查：
- Modifier 是否有未声明的依赖？例如
modal--scrollable是否要求 DOM 中存在modal__body并设置了max-height？这类需加注释说明 - Element 名是否含样式词？
card__title-big错，card__title--compact对——big 是视觉描述，compact 是状态语义 - 是否存在“伪元素”命名？
card__footer__copyright违反 BEM 层级限制，应拆成独立 block 或改用card__footer-copyright（非标准但比嵌套更可控）
真正难的不是写出合规类名，而是让所有人对「什么是清晰的角色语义」达成一致。这类判断没法靠工具兜底，得靠 Review 时多问一句：“这个类名，不看 HTML 和 JS，能让人秒懂它在哪、干什么、什么状态下生效吗？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
