Utility-First CSS 的崛起：以 Tailwind CSS 为例

2023-08-20 4 min

1. 传统 CSS 方法论的困境

在 Utility-First 出现之前，我们有许多优秀的 CSS 方法论来组织样式，例如：

BEM (Block, Element, Modifier): 通过 block__element--modifier 的命名约定来保证样式的独立性和可维护性。
OOCSS (Object-Oriented CSS): 提倡将结构与皮肤分离，以及容器与内容分离。
CSS-in-JS: 将 CSS 直接写入 JavaScript 组件中，实现了组件级的样式封装。

这些方法在一定程度上解决了 CSS 全局污染和代码组织的问题，但通常也带来了新的问题：为无数的 class 命名所耗费的心智、文件切换的繁琐，以及 CSS-in-JS 可能带来的运行时开销。

2. 什么是 Utility-First？

Utility-First (功能优先) 是一种 CSS 思想，它主张提供一系列 单一用途、命名不变的功能类，然后通过组合这些类来构建复杂的 UI。

例如，你不会去写一个 .card 类，然后在 CSS 文件里定义它的 display, padding, box-shadow。取而代之的是，你直接在 HTML 中这样写：

<div class="block p-6 rounded-lg shadow-lg bg-white">
  <!-- ... -->
</div>

这里的 block, p-6, rounded-lg 等都是功能类，它们各自只负责一件小事。

3. Tailwind CSS：Utility-First 的典范

Tailwind CSS 是目前最流行的 Utility-First CSS 框架。它提供了一套极其详尽的功能类，几乎涵盖了所有常用的 CSS 属性。

核心优势:

极速开发: 你几乎不需要离开 HTML 文件。通过组合原子类，可以快速构建出任何设计，极大地提升了原型设计和开发的效率。
强制设计系统: 由于所有的样式（颜色、间距、字号）都来自预定义的配置 (theme)，团队成员可以轻松地保持 UI 的一致性，避免了“魔法数字”的出现。
无需为命名烦恼: “计算机科学两大难题：缓存失效和命名。” Tailwind 让你基本告别了为 CSS 类命名的烦恼。
极致性能: 在生产构建时，Tailwind 会扫描你的文件，通过 PurgeCSS (或内置的 JIT 引擎) 移除所有未被使用的 CSS 类，最终的 CSS 文件体积通常会非常小。

4. “类名地狱”？—— 看待缺点的不同视角

对 Tailwind 最常见的批评就是它让 HTML 变得非常臃肿，可读性差，像是回到了“行内样式”的时代。

<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-blue-500 hover:bg-blue-700">
  Click me
</button>

这确实是一个需要适应的过程。但支持者认为：

样式和结构本就紧密耦合，将它们放在一起反而更便于维护。
通过提取可复用的组件（如 React/Vue 组件），可以将这部分“混乱”封装起来。

对于需要复用的样式组合，Tailwind 提供了 @apply 指令：

/* in your css file */
.btn-primary {
  @apply py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-blue-500 hover:bg-blue-700;
}

这样你就可以在 HTML 中使用 .btn-primary 了。不过，Tailwind 官方更推荐通过组件化来解决复用问题。

结论

Utility-First 和 Tailwind CSS 的成功，标志着前端开发在“关注点分离”上的理念转变——从“语言的分离” (HTML/CSS/JS) 转向了“组件的分离”。它通过一种看似“原始”的方式，解决了现代 Web 开发中的许多实际痛点，为开发者提供了一条通往高效、一致和高性能 UI 的捷径。