引言：为什么 CSS 需要进化？
想象你正在装修一间毛坯房：
- 原生 CSS就像手动搅拌水泥、切割木板
- 现代 CSS 工程化则像使用自动化工具和预制模块
本文将带你穿越 CSS 的发展史，用代码示例揭示技术演进背后的逻辑。
第一阶段：原生 CSS 的困局（1996）
典型问题
/* 重复的代码 */
.header { color: red; }
.sidebar .header { color: blue; }
/* 全局污染 */
.button { background: gray; } /* 其他模块的 .button 也被影响 */
痛点：
- 无法定义变量和复用代码
- 选择器冲突导致样式污染
- 缺乏嵌套等语法糖
第二阶段：预处理器革命（2006-2010）
Sass 示例
// 定义变量与混合
$primary-color: #1890ff;
@mixin flex-center {
display: flex;
justify-content: center;
}
// 嵌套语法
.header {
@include flex-center;
color: $primary-color;
.logo {
width: 100px;
}
}
解决的问题：
- 通过变量/混合提升代码复用性
- 嵌套语法增强可读性
- 支持文件拆分（
@import）
局限：
- 仍需手动处理浏览器兼容性
- 未解决全局作用域问题
第三阶段：后处理器时代（2015）
PostCSS + Autoprefixer 示例
/* 开发者编写的现代 CSS */
.container {
display: grid;
gap: 20px;
}
/* 自动转换后 */
.container {
display: -ms-grid;
display: grid;
-ms-grid-gap: 20px;
gap: 20px;
}
技术栈：
npm install postcss autoprefixer --save-dev
核心价值：
- 自动添加浏览器前缀（如
-webkit-） - 将现代 CSS 语法转换为旧版语法（如
gap→grid-gap）
第四阶段：模块化浪潮（2016）
CSS Modules 示例
// React 组件
import styles from './Button.module.css';
function Button() {
return <button className={styles.btn}>Click</button>;
}
/* Button.module.css */
.btn {
/* 编译后类名变为 ._btn_1x2y3 */
background: #1890ff;
}
解决的问题：
- 通过哈希类名实现局部作用域
- 彻底告别样式污染
第五阶段：CSS-in-JS（2017）
styled-components 示例
import styled from 'styled-components';
// 动态创建组件
const Button = styled.button`
background: ${props => props.primary ? '#1890ff' : 'gray'};
padding: ${props => props.size === 'large' ? '16px' : '8px'};
`;
// 使用
<Button primary size="large">提交</Button>
核心能力：
- 样式与组件深度绑定
- 支持动态主题切换
- 自动处理供应商前缀
第六阶段：原子化 CSS（2020）
Tailwind CSS 示例
<!-- 通过工具类组合实现样式 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
Submit
</button>
优势：
- 快速原型开发
- 减少自定义 CSS 代码量
问题：
- 生成大量未使用的 CSS 类
- 类名过长影响可读性
第七阶段：按需原子化（2022）
UnoCSS 示例
<!-- 输入 -->
<div class="m-4 c-#1890ff">Hello</div>
<!-- 按需生成 CSS -->
<style>
.m-4 { margin: 1rem; }
.c-#1890ff { color: #1890ff; }
</style>
技术原理：
- 扫描项目代码中的类名
- 动态生成最小化的 CSS
优势对比：
| 特性 | Tailwind CSS | UnoCSS |
|---|---|---|
| 生成体积 | 较大 | 极小（按需） |
| 配置复杂度 | 高 | 极低 |
| 自定义规则 | 受限 | 高度灵活 |
