article_image

Tailwind 是当红的 CSS 框架,但作者想聊聊为什么他不喜欢也不看好这个框架

author_avatar

发布于:2024-06-30 10:00:00


更多文章

article_image

🔗 原文链接

在阅读这篇文章前,你可能需要了解什么是 Tailwind CSS。

Tailwind CSS 是一个“class 优先”的 CSS 框架,旨在帮助开发者快速构建现代网站。与传统的 CSS 框架不同,Tailwind 并没有预定义的组件,而是提供了一系列低级的 class,让开发者可以通过组合这些类来实现各种样式。

例如,使用 bg-blue-500 类可以将元素的背景色设置为蓝色,使用 text-center 类可以将文本居中对齐。


TailwindCSS 官网有个动态的例子
TailwindCSS 官网有个动态的例子

原文作者 Piirainen 对 Tailwind CSS 的整体态度是持否定的。他先从 Tailwind CSS 的起源讲起。

Tailwind CSS 的创始人 Adam Wathan 在阅读 Nicolas Gallagher 关于 HTML 语义和前端架构的文章后,受到启发,决定创建一种新的 CSS 框架。Nicolas 提出了使用与内容无关的类名来创建可重用组件的理念,而 Adam 则进一步发展,将样式规则直接内联到 HTML 中。这一做法虽然与当时的行业惯例相悖,但 Adam 在 2017 年 8 月通过一篇关于 CSS 实用类和“关注点分离”的文章,成功推广了他的想法。

在 Tailwind CSS 的发展过程中,Adam 引入了新的术语和概念,宣称“语义类命名”是导致 CSS 难以维护的原因,并通过一系列巧妙的例子,展示了他的框架如何带来更可维护的 CSS 架构。虽然这一观点与此前的 CSS 最佳实践相矛盾,但通过有效的市场推广,Tailwind 的实用类优先工作流逐渐被开发者接受。


这两个例子中的理念和做法其实是冲突的
这两个例子中的理念和做法其实是冲突的

Tailwind 的成功可以分为三个阶段。首先是在起源阶段,Adam 利用了 Nicolas 的理念推出了实用类优先的 CSS 框架。接下来,Tailwind 推广了实用类优先的工作流,鼓励开发者在初期使用大量的实用类,然后根据需要提取重复模式。尽管文档不鼓励过早进行抽象,这种做法有效地锁定了开发者,增加了用户粘性。

2023 年 12 月,Tailwind 推出了 Catalyst UI kit,这不仅是一个基于 React 的 UI 库,更是 Tailwind 语言的一次重大扩展。Catalyst 的引入使得 Tailwind 的 DSL(领域特定语言)更加复杂,但也带来了更多的维护难题,比如如何管理大量的工具类,以及何时使用 @apply 指令。


一个例子,一个按钮背后隐藏了许多代码
一个例子,一个按钮背后隐藏了许多代码

在原文中,Piirainen 对 Tailwind CSS 提出了严厉的批评。他认为,Tailwind 将“语义类名”视为 CSS 难以维护的原因,这是对过去 CSS 研究和实践的否定。此外,他还批评了 Tailwind 的营销策略,认为它误导了开发者,使他们偏离了原本的 CSS 最佳实践。

虽然 Tailwind CSS 在商业上取得了成功,但 Piirainen 呼吁开发者重新审视过去十年 CSS 的发展历程,学习如何构建可扩展的架构,并理解原子类名和内联样式在大背景下的作用。他建议从学习 CSS 开始,了解语义命名的优势,并参考 MDN 文档,学习优秀开发者如何更高效地使用 CSS。

最后,Piirainen 表达了他对 CSS 的深厚感情,并预言 Tailwind 可能无法长久维持,因为它的特定语言和误导性宣传终将难以为继。他鼓励开发者掌握编写干净 HTML 和 CSS 的技能,以保持长期的技术竞争力。

Adam Wathan 曾在演讲中提到:“如果你给它一个机会,我真的认为你会想知道为什么以前会以其他方式使用 CSS。”


author_avatar

UNTAG 官方