CSS Modules是一种CSS文件的使用方式，它通过在构建过程中（如使用Webpack这样的模块打包器）为CSS类名和选择器添加唯一标识符（如哈希值），来实现样式的局部作用域。这种方法解决了传统CSS中全局作用域导致的样式冲突问题。
简单来说，CSS Modules允许你在CSS文件中编写样式，然后在JavaScript组件中导入这些样式。但与传统CSS不同的是，导入的样式并不是一个全局可访问的样式表，而是一个对象，其中的键是CSS类名（转换为驼峰命名法），值是这些类名对应的唯一标识符。在组件的JSX或模板中，你可以通过引用这个对象来应用样式，但由于类名被替换成了唯一的标识符，因此样式只会应用到当前组件中，不会影响到其他组件或全局样式。
CSS Modules的主要优点是提高了样式的可维护性和组件的独立性，减少了样式冲突的可能性。同时，它也让CSS的编写更加模块化和灵活，可以更容易地与JavaScript组件配合使用。
CSS Modules的特点
- 作用域限定：CSS Modules通过为每个类名和选择器生成唯一的标识，实现了样式的局部作用域。这意味着，即使不同的组件使用了相同的类名，它们的样式也不会相互干扰。
- 易于维护：由于样式被限制在各自的组件内，因此当需要修改或重构组件时，可以更容易地找到并修改相关的样式。
- 灵活性：CSS Modules允许开发者在需要时通过特定的语法（如
:global）声明全局样式，从而保持一定的灵活性。
CSS Modules的使用方法
在React等现代前端框架中，CSS Modules的使用通常非常简单。以下是一个基本的使用流程：
- 定义CSS文件：在项目中创建CSS文件，并编写样式规则。如果需要使用CSS Modules，通常需要将样式文件命名为xxx.module.css（或其他支持的扩展名，如.sass、.less等）。
- 在JS模块中导入CSS文件：在组件的JS文件中，使用import语句导入CSS文件。导入的样式将作为一个对象被导出，对象的键是类名（转换为驼峰命名法），值是生成的唯一标识。
- 在组件中使用样式：在组件的JSX或模板中，通过引用导入的样式对象来使用样式。由于样式对象的键是类名（驼峰命名法），因此需要使用方括号语法来动态绑定类名。
示例
假设有一个名为Button.module.css的CSS文件，内容如下：
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: darkblue;
}
在React组件中，可以这样使用CSS Modules：
import React from 'react';
import styles from './Button.module.css';
function MyButton() {
return <button className={styles.button}>Click me!</button>;
}
export default MyButton;
在上面的代码中，styles.button 将被编译成一个唯一的类名（如_Button_button__3jMVt），从而确保样式只应用于MyButton组件中的按钮元素。
总结
CSS Modules是一种有效的解决CSS全局作用域问题的方法，它通过为类名和选择器生成唯一标识来实现样式的局部作用域。在React等现代前端框架中，CSS Modules的使用非常简单，可以大大提高样式的可维护性和组件的独立性。
