BEM本身不等于命名空间隔离，因其前缀仅为语义标识而非技术隔离机制；真正隔离依赖CSS Modules等构建工具或文件级划分，BEM仅确保前缀有意义、可维护。
为什么BEM本身不等于命名空间隔离
BEM 的 .user-card__title 看似带“user-card”前缀，但这个前缀只是人眼可读的语义标识，不是技术层面的命名空间。浏览器仍把它当普通类名处理，.user-card__title 和 .product-card__title 不会自动分属不同作用域——它们只是名字不同，没隔离机制。真正起隔离作用的是构建工具（如 CSS Modules）或手动加项目级前缀，BEM 只负责让这个前缀“有意义、可维护”。
如何用 BEM + 文件级划分实现模块边界
每个业务模块对应一个独立 CSS 文件，且文件名与 Block 名一致，这是最轻量也最有效的隔离起点：
-
/modules/user/User.module.css里只写.user、.user__avatar、.user--admin -
/modules/product/Product.module.css里只写.product、.product__price、.product--on-sale - 禁止跨模块引用类名：
.user__avatar不能在Product.module.css里出现，哪怕只是想复用样式 - 构建时若启用 CSS Modules，类名自动哈希化，
user__avatar编译后变成User_user__avatar__abc123，天然隔离
多人协作时怎么避免 Block 名冲突
Block 名是模块的“身份证”，一旦重复，BEM 结构就失效。常见踩坑点：
- 两个团队都建了
.card：一个用于商品列表，一个用于用户资料——必须改名，比如.product-card和.user-card - 用缩写或泛化词：
.btn、.header是高危名，应明确业务归属：.checkout-button、.order-summary-header - 老项目迁移时已有
.modal，新模块不能叫.modal，而要叫.payment-modal或.legacy-modal，保留上下文 - 建议在项目根目录建
blocks.md文档，列出所有已注册 Block 名，PR 时需人工/脚本校验
第三方组件怎么塞进你的 BEM 命名空间
Ant Design、MUI 这类库的类名你没法改，但可以包裹一层自己的 Block：
立即学习“前端免费学习笔记（深入）”；
- 不要直接写
<Button className="ant-btn-primary">，而是包一层：<div class="checkout-form__submit-button"><Button /></div> - 在
CheckoutForm.module.css中定义.checkout-form__submit-button，控制尺寸、间距等外层样式 - 内部第三方组件样式由其自身管理，你只管“它在这个模块里长什么样”，不碰它的原子类
- 如果必须覆盖第三方样式，用
.checkout-form__submit-button .ant-btn，但仅限必要场景；优先用 wrapper 类 + CSS 变量传参
真正的隔离不在类名长度，而在责任边界——谁定义结构，谁控制样式，谁负责状态，这三者一旦混在一起，再长的 BEM 类名也救不了。
