CSS 模块化指南

CSS 模块化是一种将 CSS 代码分割成独立的模块，并在需要时导入到项目中的一种方法。这种方法有助于提高代码的可维护性和复用性。

优势

• 模块化：将 CSS 代码分割成独立的模块，便于管理和维护。
• 复用性：可以轻松地将模块导入到不同的项目中。
• 解耦：CSS 模块与 HTML 结构解耦，提高代码的灵活性。

基本概念

• 导入模块：使用 @import 指令导入 CSS 模块。
• 局部作用域：CSS 模块中的样式只作用于导入该模块的组件。
• 变量和函数：CSS 模块支持变量和函数，提高样式的可复用性。

示例

/* styles.css */
:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

<!-- index.html -->
<link rel="stylesheet" href="/zh/docs/css/styles.css">
<button class="button">点击我</button>

CSS 模块化示例

扩展阅读

• CSS 模块化教程