CSS样式塌陷根源是全局作用域下后定义规则覆盖先定义规则，BEM无法解决因类名仍全局可见导致的覆盖；CSS Modules通过哈希化类名实现作用域隔离，是唯一能切断塌陷链路的方案。
单纯靠改类名前缀或加 !important 无法解决大型 SPA 中的 CSS 命名冲突引发的样式塌陷——因为塌陷根源不是“名字撞了”，而是多个组件共用同一份全局 CSS 文件时，后加载/后定义的规则覆盖了先定义但逻辑上更该生效的样式，导致父容器高度归零、浮动子元素溢出、布局错位等连锁反应。
为什么 BEM 类名写得再规范，仍会触发样式塌陷？
BEM 只约束命名结构，不改变 CSS 的全局作用域本质。只要两个组件都输出 .card__header 到同一份 app.css，且后者在文件中位置靠后，它就会覆盖前者定义的 height 或 overflow，进而破坏 BFC 触发条件，导致父容器无法包裹浮动子项——这正是塌陷的直接诱因。
- 常见错误现象：
.user-list__item设了float: left，但.user-list的height被另一个同名 block 的重置规则清空，整个列表塌成一条线 - 构建时未启用哈希：Vite 中若只配了
css.modules: { pattern: '[local]' }却没设generateScopedName，.card__body仍裸奔进全局 - 第三方库干扰：Ant Design 的
.ant-card里含overflow: hidden，而你的.card__body被它同名规则意外覆盖，BFC 失效
CSS Modules 是唯一能切断塌陷链路的方案
它让每个组件的类名在构建时生成唯一哈希（如 Card_card__Kx2f1），彻底隔离作用域，使 .card__body 不再是全局符号，自然不会被其他模块的同名规则覆盖，BFC 触发逻辑也得以稳定保留。
- 必须用 JS 对象方式绑定：
className={styles.card__body}，硬写class="card__body"会跳过哈希，直接暴露全局名 - Vue 中
<style module></style>和<style scoped></style>不等价：scoped仅加属性选择器（如.card__body[data-v-xxx]），但同名类仍存在于 DOM，仍可能被外部 CSS 通过属性选择器覆盖 - 要覆盖第三方组件（如
antd）需显式声明：:global(.ant-card) { overflow: visible; }，否则你的局部哈希类无法穿透其样式边界
当必须保留全局 CSS 时，如何防止塌陷扩散？
若因历史原因无法全量接入 CSS Modules，至少要用物理隔离 + BFC 强制兜底，而非依赖命名。
- 给应用根节点加唯一 ID：
<div id="sales-app">...</div>，所有自定义样式前置该 ID：#sales-app .card__body { overflow: hidden; }，避免与#admin-app .card__body冲突 - 对所有可能浮动的容器，强制开启 BFC：
#sales-app .card { overflow: hidden; }或#sales-app .card { display: flow-root; }，不依赖类名是否被覆盖 - Tailwind 用户可在
tailwind.config.js中设prefix: 'sa-'，让sa-overflow-hidden与第三方overflow-hidden彻底解耦
真正容易被忽略的是：样式塌陷往往不是某一行 CSS 写错了，而是构建配置漏掉了哈希规则，或团队误把 scoped 当作 module 使用——此时 BEM 写得再标准，也只是给塌陷过程加了一层语义化的注释而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
