为什么CSS Modules能避免样式冲突
CSS全局污染的本质，是选择器在DOM中无差别匹配。CSS Modules在构建时把className自动重命名（比如button → Button_button__abc123），让样式只作用于当前模块的元素。它不靠约定、不靠命名规范，而是靠编译时隔离——只要启用，每个.module.css文件天然就是独立作用域。
- 构建工具（如Webpack）必须配置
css-loader并开启modules: true，否则只是普通CSS - 类名重命名规则默认是
[name]_[local]__[hash:base64:5]，可自定义但别去掉[local]，否则失去局部性 -
:global可以显式退出局部作用域，但滥用会回到老问题：一个:global(.header)就可能污染全局
React中怎么正确引入和使用CSS Modules
在React组件里，不能用import './Button.css'，而要写成import styles from './Button.module.css'。这时styles是一个对象，键是原始类名，值是编译后的哈希类名。
- 组件JSX中必须通过
styles.button这种形式传给className，直接写className="button"无效 - 动态类名拼接要用
clsx或模板字符串，比如className={<code>${styles.button} ${isActive ? styles.active : ''} - 不支持
@import导入另一个.module.css，跨文件复用应提取为CSS变量或JS常量，或用:compose（但兼容性差，不推荐）
遇到“样式没生效”通常卡在哪几个地方
最常见不是写法错，而是构建链路断了。比如：
- 文件后缀不是
.module.css（写成.css或.scss但没配modules: true） - 使用了
styled-components或emotion等方案，却误以为自己在用CSS Modules - 服务端渲染时，
className生成逻辑与客户端不一致，导致hydration mismatch - 开发环境热更新没刷新CSS模块映射，重启dev server比硬刷页面更可靠
和CSS-in-JS比，CSS Modules的取舍点在哪
它不生成行内样式，也不侵入JS逻辑，保留了CSS的可缓存性、可调试性和伪类/媒体查询的原生支持。但代价是：
立即学习“前端免费学习笔记（深入）”；
- 无法基于props动态生成样式（比如
color={props.theme}），得靠CSS变量或额外class - 没有运行时主题切换能力，换肤需预编译多套CSS或配合
:root变量 -
composes语法已被主流loader弃用，跨模块继承现在基本靠export+importCSS变量
CSS Modules不是银弹，它解决的是“多人协作时样式互相覆盖”这个具体问题。一旦你开始需要运行时样式计算、细粒度主题控制或服务端动态样式注入，就得承认：这时候它已经不是最顺手的工具了。
