bem通过块级前缀明确样式归属，解决中大型项目样式边界失控问题；强制类名携带“户籍信息”，配合scss嵌套规范、构建时校验及目录结构契约，实现模块化开发与协作。
因为BEM把样式归属明确到具体组件，天然支持多人并行开发、模块复用和渐进式重构——不是“它看起来规范”，而是它在真实协作规模下能守住样式边界。
中大型项目最常崩在「样式归属不可知」
当一个按钮被改坏，影响的是订单页、弹窗、侧边栏三个不相关模块，问题往往出在没人知道这个 .btn 到底属于哪个上下文。BEM强制类名携带块级前缀（如 product-card__btn、user-modal__btn），让每个样式声明都自带“户籍信息”。
- 开发者看到
checkout-form__submit--loading，立刻知道它只属于 checkout-form 模块，且是 submit 元素的 loading 状态 - 搜索替换时不会误伤其他模块的 submit 样式
- Code Review 时可直接判断：这个类是否该出现在当前文件里
Scss 中写错嵌套就等于绕过 BEM 防线
BEM 的约束力不来自命名习惯，而来自构建时校验和 SCSS 编写规范。常见失效场景是开发者在 .card 块内写了 & a { color: blue; }，这实际注入了全局 a 样式，和 BEM 无关。
- SCSS 中只允许使用
&__element和&--modifier两种嵌套形式 - 禁用
& div、& > span、& a等无语义选择器 - 用
postcss-bem-linter在构建阶段报错，而不是靠人眼检查 - 配合
stylelint-selector-bem-pattern规则锁定类名结构
目录结构必须和 BEM 类名严格对齐
如果 card.css 文件里出现了 .user-profile__avatar，说明目录组织已失焦。BEM 不是纯命名法，它是“文件即模块”的契约。
- 每个 block 对应一个一级目录：
/components/product-card/ - 目录内只放该 block 的样式、脚本、测试，不放子组件（子组件应独立成目录）
- 不允许出现
card__button却放在/components/button/下——它不是独立 block，不该有自己生命周期 - 文件名与 block 名一致：
product-card.css→.product-card，避免card.css→.product-card这类错位
真正难的不是写出 block__element--modifier，而是让团队在加一个 tooltip 时，本能地新建 /components/tooltip/ 而不是往 modal.css 里塞 .modal__tooltip——这需要目录约束、CI 检查、以及最初几个模块的示范性实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
