css modules能从根本上切断移动端样式冲突根源，因其在构建时将同名类名（如.title）重命名为唯一哈希值（如_title_abc123和_title_def456），彻底消除全局类名污染，确保各组件样式互不干扰。
它本身不专为移动端设计，但能从根本上切断移动端样式冲突的根源——全局类名污染。
CSS Modules 不解决“移动端特有”的冲突，只消灭“所有组件共用类名”这个底层问题
移动端样式冲突常被误认为是 viewport、rem、flex 布局或 iOS/Android 渲染差异导致的，其实多数真实问题是：多个组件（比如 Header.module.css 和 Card.module.css）都写了 .title，结果在同一个页面里互相覆盖。CSS Modules 的作用就是让这两个 .title 编译后变成 _title_abc123 和 _title_def456，彻底断开命名耦合。
- 不是靠媒体查询或设备检测，而是靠构建时哈希隔离
- 无论你在 iPhone 上还是安卓上运行，只要打包流程生效，类名就唯一
- 它不修复 Safari 的 flex gap bug，但它确保你写的
.btn永远不会被另一个.btn覆盖
为什么移动端项目特别需要 CSS Modules？
因为移动端组件复用率高、嵌套深、第三方 UI 库（如 Ionic、Vant）又自带大量全局类名，一旦你手写一个 .icon 或 .list-item，极大概率和库内同名类撞车。而 CSS Modules 强制你通过 styles.icon 访问，天然绕过全局污染。
- Vite 项目中，只要文件名是
xxx.module.css，默认启用；Webpack 则需确认css-loader配置了modules: true - 不要在模块文件里用
@import './reset.css'—— 这会把全局样式注入局部作用域，破坏隔离 - 想让父组件能定制子组件根元素？必须用
:global(.custom-root)显式声明，否则外部选不到
常见错误：以为开了 CSS Modules 就万事大吉
实际调试中发现样式没生效，往往不是配置问题，而是写法错了。移动端 DOM 结构更紧凑，错一个 class 绑定就可能整块布局塌陷。
- 写成
className="button"→ 完全无效，必须是className={styles.button} - 动态拼接类名如
className={styles[`btn-${type}`]}→ 确保type值真实存在于Button.module.css中，否则返回undefined - 用了
!important覆盖第三方样式 → 它会压过 CSS Modules 生成的哈希类，但代价是破坏模块边界，应优先改用:global()或 CSS 变量
真正容易被忽略的是：CSS Modules 的哈希值依赖文件路径 + 类名 + 内容三者共同计算。改一行注释、挪动一个文件位置，哈希就变——这在热更新时可能导致样式闪动，尤其在移动端调试中容易误判为渲染 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
