很多前端在学习 CSS 时都会有一个疑问：
为什么 CSS 会有这么多东西？
css2、css3、less、scss、css-in-js、原子 css ……
看起来像是不断在“发明新轮子”。
其实如果把时间线拉长，你会发现这些技术并不是随机出现的，而是在解决 不同阶段的工程问题。
从宏观来看，CSS 的发展基本围绕三件事：
- 提高复用能力
- 提高可维护性
- 提高性能与开发效率
今天我们就从时间线的角度，一步一步看看 CSS 的演化。
一、最早的 CSS：让网页变好看
Q：CSS 最初是为了解决什么问题？
答案其实非常简单：
让 HTML 和样式分离。
在早期网页中，HTML 既负责结构，又负责样式，比如：
<font color="red" size="5">Hello</font>
这种写法的问题是：
- HTML 变得非常混乱
- 样式无法统一管理
- 修改成本极高
于是 CSS 诞生了。
最早的 CSS 提供的能力主要包括：
- 选择器
- 字体样式
- 颜色
- 盒模型
- float 布局
- position 定位
例如：
.container {
width: 960px;
margin: auto;
}
这一阶段的核心目标只有一个：
让网页可以优雅地控制样式。
二、CSS 变复杂之后：预处理器时代
随着网站越来越复杂，一个问题开始显现：
CSS 写起来越来越痛苦。
典型问题包括：
- 没有变量
- 代码重复
- 结构混乱
- 无法复用
于是出现了 CSS 预处理器。
比较常见的有：
- Less
- Sass
- SCSS
Q：预处理器解决了什么问题？
答案是：
让 CSS 拥有编程能力。
例如变量：
$primary: #1890ff;
button {
color: $primary;
}
嵌套结构：
.card {
padding: 20px;
.title {
font-size: 20px;
}
}
Mixin 复用：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
预处理器的出现，让 CSS 第一次具备了 工程化能力。
但问题依然存在。
三、CSS 的大问题：全局污染
当项目规模继续扩大时，一个新的问题开始困扰开发者：
CSS 是全局的。
例如：
.title {
color: red;
}
如果项目中有多个 .title，样式就会互相污染。
于是社区提出了一种解决方案：
CSS Modules
Q：CSS Modules 是什么？
核心思想：
让 CSS 拥有局部作用域。
例如：
.title {
color: red;
}
编译后会变成：
.title__3x82a
在 React 中使用：
import styles from "./index.module.css"
<div className={styles.title}></div>
这样就避免了：
- 命名冲突
- 全局污染
但 CSS Modules 仍然存在一个问题：
样式和组件仍然是分离的。
四、组件化时代：CSS-in-JS
当 React 等组件框架流行起来之后，开发者开始思考一个问题：
既然 UI 是组件，那 CSS 为什么不能也是组件的一部分？
于是出现了：
CSS-in-JS
典型写法：
const Button = styled.button`
color: red;
padding: 10px;
`
Q：CSS-in-JS 的优势是什么？
主要有三个：
1 作用域天然隔离
组件之间不会污染。
2 动态样式非常容易
const Button = styled.button`
color: ${props => props.primary ? "blue" : "gray"};
`
3 完美适配组件化开发
样式和组件写在一起。
但 CSS-in-JS 也带来了新的问题：
- 运行时性能开销
- JS 体积变大
- SSR 更复杂
于是前端社区又走向了另一条路线。
五、效率革命：原子 CSS
最近几年非常流行的一种方案叫：
Atomic CSS（原子 CSS）
核心思想是：
一个 class 只做一件事。
例如：
<div class="flex items-center justify-center p-4 text-red-500"></div>
每个 class 都是一个最小样式单元。
Q：原子 CSS 的优点是什么？
1️⃣ 高复用 2️⃣ 几乎没有冗余 CSS 3️⃣ 开发效率非常高 4️⃣ 编译体积很小
典型框架包括：
- Tailwind
- UnoCSS
- WindiCSS
很多现代项目都会使用这种方式。
六、CSS 本身也在进化
与此同时，CSS 标准本身也在不断增强。
例如：
- Flexbox
- Grid
- CSS Variable
- Container Query
- Nesting
例如 CSS 变量：
:root {
--primary: red;
}
button {
color: var(--primary);
}
很多原本需要 Sass 才能实现的能力，现在 CSS 原生就能实现了。
七、从宏观角度看 CSS 的发展
如果把这些技术放在一条时间线上，其实非常清晰。
第一阶段
解决 样式问题
目标：
让网页变好看
第二阶段
解决 代码问题
工具：
- Less
- Sass
- SCSS
目标：
让 CSS 更容易维护
第三阶段
解决 规模问题
工具：
- CSS Modules
- BEM
目标：
大型项目不混乱
第四阶段
解决 组件化问题
工具：
- CSS-in-JS
目标：
CSS 与组件绑定
第五阶段
解决 效率和性能问题
工具：
- Atomic CSS
目标：
写得更快，体积更小
八、真正推动 CSS 发展的三股力量
如果站在更高层看，其实是三件事在推动 CSS 进化。
1 前端项目规模爆炸
过去的网站：
几十个页面。
现在的应用：
几千个组件。
CSS 必须工程化。
2 前端框架崛起
组件化开发成为主流。
UI 不再是页面，而是 组件树。
CSS 也必须适应组件化。
3 性能需求越来越高
现代网站需要：
- SEO
- SSR
- SSG
- Core Web Vitals
CSS 体积和加载速度变得非常重要。
九、现代前端通常怎么用 CSS？
现在很多项目会使用这样的组合：
Tailwind + CSS Variable
或者：
Tailwind + CSS Modules
这样可以同时获得：
- 开发效率
- 组件隔离
- 高性能
十、一个有趣的趋势
很多人没有意识到一件事：
CSS 其实正在慢慢“消失”。
未来的 UI 体系更可能是：
Design Token
+
Atomic Engine
+
Runtime Layout
样式不再是手写 CSS 文件，而是由系统自动生成。
CSS 的角色，正在从“写样式”变成：
驱动 UI 渲染的底层语言。
如果这篇文章对你有帮助，欢迎点赞、转发，让更多前端一起看懂 CSS 的进化之路。
