## 什么是CSS模块化？
CSS模块化是一种将CSS代码分解为小的、可重用的模块的方法，以提高代码的可维护性和可重用性。通过将CSS代码分解为模块，开发人员可以更轻松地管理代码库，减少代码冗余，并提高代码的可读性和可维护性。
常见的CSS模块化方法包括BEM、SMACSS、OOCSS等。
## 如何使用CSS模块化来组织CSS代码？
以下是使用CSS模块化来组织CSS代码的步骤：
1. 定义模块：首先，将CSS样式分解为小的、可重用的模块。每个模块应该只关注一个特定的元素或组件，并具有自己的命名空间。例如：
```css
/* 定义一个按钮模块 */
.button {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* 定义一个表单输入框模块 */
.input {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
```
2. 命名约定：为了避免命名冲突，可以使用命名约定来定义模块的命名空间。例如，在BEM中，每个模块都由一个块、一个元素和一个修饰符组成。例如：
```css
/* 定义一个按钮模块 */
.button {} /* 块 */
.button__text {} /* 元素 */
.button--primary {} /* 修饰符 */
```
3. 组合模块：通过将多个模块组合在一起，可以创建更复杂的组件和布局。例如：
```css
/* 组合按钮和表单输入框 */
.button-input {
display: flex;
}
.button-input .button {
margin-right: 1rem;
}
.button-input .input {
flex-grow: 1;
}
```
上述代码中，我们将`.button`和`.input`组合在一起，创建了一个`.button-input`组件，其中按钮位于输入框左侧，输入框占据剩余的空间。
通过使用CSS模块化，开发人员可以更轻松地管理和组织CSS代码，并提高代码的可读性和可维护性。
