采用CSS Modules可避免类名冲突并实现样式隔离，需在webpack中配置css-loader启用modules，通过import导入后以styles.className使用；可自定义localIdentName优化类名格式，开发用[name]_[local]_便于调试，生产用哈希压缩体积；支持:global()声明全局样式，混合局部与全局规则；通过composes复用其他类实现样式继承；结合JS逻辑动态绑定类名，提升灵活性。
如果您在使用React或其他前端框架开发组件化应用时，希望避免CSS类名冲突并实现样式作用域隔离，则可以考虑采用CSS Modules来管理样式。以下是几种常见的使用方法：
本文运行环境：MacBook Pro，macOS Sonoma
一、基础配置与引入
CSS Modules的核心思想是将CSS文件中的类名进行局部作用域处理，确保不会污染全局样式。通过构建工具如Webpack进行配置，启用CSS Modules功能。
1、在webpack配置中找到css-loader，添加modules选项，并设置为true或配置具体参数。
立即学习“前端免费学习笔记（深入）”；
2、使用import语法导入CSS文件，此时导出的对象包含本地化的类名映射。
3、在JSX中通过对象属性的方式引用类名，例如 className={styles.button}。
二、命名规则定制
为了提升可读性和调试便利性，可以自定义生成的类名格式，避免默认哈希值过长或不易识别。
1、在css-loader配置中使用localIdentName字段定义模板，如[hash:base64:5]或[name]_[local]_[hash:base64:5]。
2、开发环境下推荐使用包含原始文件名和类名的格式，便于定位源码位置。
3、生产环境可选择更紧凑的哈希形式以减小打包体积。
三、全局样式的混合使用
尽管CSS Modules默认将所有类名视为局部作用域，但在某些场景下仍需引用全局样式，比如第三方库或reset.css。
1、在类名前添加:global标记，表示该选择器不参与局部化转换。
2、书写方式为 :global(.className) 或 :global #idSelector，适用于单个选择器或复杂嵌套。
3、可在同一文件中同时使用局部和全局样式，实现灵活控制，例如 :global(body) { margin: 0; }。
四、组合现有类名
CSS Modules支持通过composes语法复用其他CSS规则，实现样式的模块化继承与扩展。
1、在一个类中使用composes关键字引入另一个文件中的类，语法为 composes: otherClass from './other.css'。
2、也可以在同一文件内组合多个类，减少重复代码。
3、适用于构建基础样式库，如按钮基类、布局容器等，提高维护效率。
五、动态类名绑定
在实际开发中，经常需要根据组件状态动态切换类名，CSS Modules可结合JavaScript逻辑灵活处理。
1、将styles对象作为普通JS对象使用，配合条件判断生成类名字符串。
2、利用模板字符串或classnames库组合多个局部类名。
3、示例：className={`${styles.active} ${condition ? styles.highlight : ''}`}。
