CSS 这些年都经历了什么？一次看懂 CSS 的演化史

掘金前端

雨夜寻晴天

2026年3月9日 10:52

很多前端在学习 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 的进化之路。

阅读视图