css modules 是解决全局样式污染更可靠的选择，因其构建时生成哈希类名，天然兼容 ssr、动态挂载及跨框架集成；scoped 依赖运行时属性注入，在弹窗插入 body、ssr hydration 不一致或穿透第三方组件时易失效。
CSS Modules 是解决全局样式污染更可靠的选择，scoped 样式在动态挂载、SSR 或跨框架集成时容易失效。
为什么 CSS Modules 比 scoped 更适合响应式组件
响应式组件常需插入到 document.body（如弹窗、Tooltip）、参与服务端渲染（SSR），或嵌套第三方库（如 Ant Design、react-datepicker）。scoped 依赖运行时注入 data-v-xxx 属性选择器，但：
- 动态插入的 DOM 节点不会自动携带 scope 属性，样式直接不生效
- SSR 生成的 scope ID 与客户端 hydration 不一致，触发 React/Vue 的 mismatch 报错
-
:deep()穿透行为不稳定，Vue 3 中已弃用，且无法精准控制作用范围 - CSS Modules 的类名是构建时生成的哈希字符串（如
Button_button__abc123），可序列化、可 debug、天然兼容 SSR 和动态挂载
如何让 CSS Modules 真正生效（常见失败原因）
“写了 .module.css 但样式没变”几乎都卡在构建链路断点上：
- 文件后缀必须是
.module.css（不是.css、.scss，除非你显式配了scss: { modules: true }） - Webpack 中不能把
modules: true写在/\.css$/全局 rule 里——否则normalize.css也被模块化，页面重置失效；应改用test: /\.module\.css$/或modules: { auto: true } - Vite 用户检查
vite.config.ts是否写了css: { modules: false }，删掉即可 - Next.js
app/目录中，import styles from './Component.module.css'只能在"use client"组件里执行；Server Component 中 import 会报Module not found - 必须用
className={styles.button}，写成className="button"就等于没启用模块化
怎么安全定制第三方组件的样式（比如 AntD Select）
直接覆盖 .ant-select 会污染全局。正确做法是组合容器 + :global() 白名单穿透：
- 给第三方组件外层加一个模块类名容器：
<div classname="{styles.selectWrapper}"><select></select></div> - 在
.module.css中只对这个容器内生效：.selectWrapper :global(.ant-select) { width: 300px; } - 避免写
:global(*)或宽泛选择器；只放行真正需要调整的类名，如:global(.ant-input)而非:global(.ant-*) - 注意：像
react-datepicker这类直接挂到body的组件，模块样式默认覆盖不到——得配合portalClassName或自定义appendTo指向带模块类名的容器
最易被忽略的一点：CSS Modules 对 @keyframes 和 CSS 自定义属性（--my-var）仍无作用域约束。动画名必须通过 styles.myAnimation 引用，变量建议加项目前缀（如 --myapp-primary），否则照样全局泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
