GeekNote
注册
登录

Tailwind CSS 浅析

Rei

Tailwind CSS 是近几年比较火的 CSS 框架,我学习了一些它的理念和用法,把想法记录如下。

什么是 Tailwind CSS

Tailwind CSS 是一个工具类优先的 CSS 框架。跟别的 CSS 框架最大的区别是,别的框架通常提供 .button, .card 这样有语义的样式名,Tailwind 提供的是 flex, pt-4, text-center 这样无语义的样式名。

可以看一个例子(取自官网):

截屏2021-12-08 20.51.49.png

使用 Tailwind 的页面里,没有 .card .author-name 这样的语义化样式,而是 bg-gray-100 rounded-xl 这样的工具样式。这样的好处是可以随时在页面内调整样式,坏处是没有重用性,如果要修改多个地方的相同样式会相当费劲。

重用样式

为了满足重用的需求,Tailwind 提供了 @apply 方法用于创建组件样式。

例如,在设计早期使用了这样的样式:

<button class="py-2 px-4 bg-indigo-500 text-white ...">
  Text
</button>

确定了这个样式需要重用后,可以用 @apply 方法将它合并成组件样式(需要 Tailwind 工具编译):

.btn {
  @apply py-2 px-4 bg-indigo-500 text-white ...;
}

这样页面代码就可以替换成:

<button class="btn">
  Text
</button>

这样就跟语义化的样式类似了。

裁减

Tailwind 建议在部署到生产环境前要裁剪 CSS 内容。Tailwind 本身有大量的工具类,例如 p-1 p-2 p-3 ... p-6,但是实际上只有一部分需要用到。Tailwind 的命令行工具或者编译工具插件可以扫描项目中的 HTML 模版,根据实际使用的样式生成最小化的 CSS 文件。

Tailwind 的全部样式加起来接近 300kb(压缩后),真实应用裁剪后的样式文件大约是 10kb(压缩后)。

Tailwind 是否适合我?

Tailwind CSS 的争议点在于它不实行“关注点分离”的最佳实践,将样式内容嵌入了页面中。作者写了一篇长文解释他的想法:CSS Utility Classes and "Separation of Concerns"。概括来说,作者在实践中发现给样式命名会阻碍效率,工具类优先是从实用出发,不必过早优化。

我觉得样式命名某些时候确实是一个痛点,有的样式语义相似但样式不同,就要费脑筋想合适的命名,例如 article__authorlist__author;有的样式本来就不需要语义化,例如 rowcol-2。所以工具类有很多适用的场合。

不过我也担心 Tailwind 以工具类优先的做法会导致项目很难维护。试想你接手别人的项目,或者打开自己三个月前的项目,看到这样的代码:

<button class="py-2 px-4 bg-indigo-500 text-white ...">
  Text
</button>

如果要新增一个类似的元素,是先把它抽象成组件类,还是复制一份?我想很可能是复制一份,因为除了页面最初的设计者,维护者很难全面掌握整个项目有多少样式是可重用的。

所以我认为适合 Tailwind CSS 的场景是一次性的设计,例如首页、活动页。如果是为长期项目做设计,则需要在做好原型设计之后,把共用样式抽取成组件供后续开发者使用。

如果是创业 MVP 项目,希望尽早开发出原型,那么更适合使用 Bootstrap 一类已经定义好一堆组件的 UI 框架。Tailwind 只提供了很多工具类,组合成想要的样式需要使用者有很强的设计功底,它的用户对象是设计师。

总的来说,Tailwind CSS 对于样式管理提出了不同的方案。我不一定会使用,但可以从它学到不少 CSS 命名和实现的参考。对样式管理有兴趣的人可以参考一下。

3
Ruby 程序员,Ruby China 管理员,Gee...
登录后评论
评论 1

非常棒的科普

reply
回复
社区准则 博客 联系 反馈 状态
主题