zh/docs/css_modules_tutorial

CSS 模块化教程

CSS 模块化是一种将 CSS 样式与 HTML 结构分离的技术，它可以帮助开发者更高效地管理和复用样式。下面将介绍 CSS 模块化的基本概念和用法。

基本概念

CSS 模块化将 CSS 样式封装在模块中，每个模块只负责一部分页面样式。模块之间通过导入和导出进行样式共享。

使用方法

1. 创建模块文件：在项目目录中创建以 .module.css 为后缀的文件，例如 header.module.css。
2. 编写样式：在模块文件中编写模块样式。
3. 导入模块：在需要使用模块样式的文件中，通过 @import 语句导入模块。

/* header.module.css */
.header {
  background-color: #f1f1f1;
  padding: 10px;
}

/* 使用模块 */
@import './header.module.css';

.header {
  color: #333;
}

优点

• 模块化：提高代码的可维护性和复用性。
• 封装：减少样式冲突。
• 简洁：代码结构清晰，易于阅读。

扩展阅读

更多关于 CSS 模块化的内容，可以阅读 CSS 模块化教程。

CSS 模块化示例