在 Twitter 上有一个讨论很有意思。
Undefined widget 'twitter'为什么在 class 中组合 CSS,而不直接写 CSS?
其实最开始发现 Tailwind CSS 火起来的时候,我也有相同的疑问。
经过一段时间的使用,我慢慢地明白了为什么 Tailwind CSS 为什么选择这种方式?
TL;DR
对于我而言, 编写 CSS 就像使用汇编语言开发程序, Tailwind CSS 则让我使用了“高级语言”,不需要再过度专注语法细节了。
命名清晰的 class 组合起来非常容易,且简单易懂。即使没有 CSS 基础也可以轻松组合出期待的 UI。 的确,对于熟练使用 CSS 的开发者来说,Tailwind CSS 提供的 class 增加了记忆成本。 但是,对于并不熟练 CSS 的开发者来说,CSS 的记忆成本更高。 并且,CSS 粒度过细,开发量非常大。
这是一个意外的收获,我也是偶然发现的。 例如:为了风格统一,我们需要在绝大多数标签上使用圆角。
使用 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 文件大小。
还以圆角为例,大家有没有在项目中看到过下面代码?
<style>
.container {
border-radius: 5px;
}
.button {
border-radius: 5;
}
.images {
border-radius: 1rem;
}
</style>
说出来有点不好意思,这样的代码,我经常遇到。 虽然 code review 时我会给出修改意见,但是这类代码从未减少。🤷♂️
refs: