在 Twitter 上有一个讨论很有意思。

为什么在 class 中组合 CSS，而不直接写 CSS？

其实最开始发现 Tailwind CSS 火起来的时候，我也有相同的疑问。

经过一段时间的使用，我慢慢地明白了为什么 Tailwind CSS 为什么选择这种方式？

TL;DR

1. 作用范围适中，且易于组合
2. 更小的 CSS bundle
3. 统一的实现减少了 bug

1. 作用范围适中，且易于组合

对于我而言， 编写 CSS 就像使用汇编语言开发程序， Tailwind CSS 则让我使用了“高级语言”，不需要再过度专注语法细节了。

命名清晰的 class 组合起来非常容易，且简单易懂。即使没有 CSS 基础也可以轻松组合出期待的 UI。 的确，对于熟练使用 CSS 的开发者来说，Tailwind CSS 提供的 class 增加了记忆成本。 但是，对于并不熟练 CSS 的开发者来说，CSS 的记忆成本更高。 并且，CSS 粒度过细，开发量非常大。

2. 更小的 CSS bundle

这是一个意外的收获，我也是偶然发现的。 例如：为了风格统一，我们需要在绝大多数标签上使用圆角。

使用 Tailwind CSS 开发，只需要一个 class

<div class="rounded"><div>

<button class="rounded"><button>

<img class="rounded" />

一般的 CSS 开发方式，需要三个 class

<div class="container"><div>

<button class="button"><button>

<img class="image" />


<style>
.container {
  border-radius: 5px;
}

.button {
  border-radius: 5px;
}

.images {
  border-radius: 5px;
}
</style>

Tailwind CSS 顺便减少的 CSS 文件大小。

3. 统一的实现减少了 bug

还以圆角为例，大家有没有在项目中看到过下面代码？

<style>
.container {
  border-radius: 5px;
}

.button {
  border-radius: 5;
}

.images {
  border-radius: 1rem;
}
</style>

说出来有点不好意思，这样的代码，我经常遇到。 虽然 code review 时我会给出修改意见，但是这类代码从未减少。🤷‍♂️

refs:

• https://tailwindcss.com/