Skip to content

Tailwind CSS:美丽的恶魔,还是争议中的宠儿

Posted on:2023年11月12日 at 16:52

在Web开发领域,我们时常会陷入争论的泥潭。有时候,这些争论就像是一场无休止的激烈辩论,不亚于死亡和税收的必然存在。而近来,这场辩论的焦点再次集中在了Tailwind CSS身上。

首先,如果你在过去几年一直都在进行Web开发,那几乎不可能不知道Tailwind。但为了那极少数可能还没听说的人,简单说,Tailwind是一个“实用为先的CSS框架,包含类似flex、pt-4、text-center和rotate-90这样的类,可以组合在一起直接在你的标记中构建任何设计。”

然而,就在最近,Tailwind CSS又一次成为了前端的焦点,这样的争论不是第一次发生,但为什么偏偏在这个时候,而且关于使用Tailwind的利弊是什么呢?让我们一起来拆解这个问题。

首先,Tailwind的优势在于它打破了关注点分离的规则。我们一直被告知关注点分离很重要,因此(通常情况下)CSS存在于不同的文件中,与HTML标记分开。为了引用样式,我们需要使用类名,这意味着你必须给这些类起个名字,而这是编程中最难的事情之一。而使用Tailwind时,你可以在标记中直接看到所有样式,这些样式以可读性强的类的形式展现出来。当然,这会打破关注点分离的规则,但放在一起也不失为一种好处。

其次,Tailwind解决了CSS的冗长性问题。CSS通常需要写很多字符来定义每个属性,而有些事情可能需要几个属性来实现相对简单的效果。而使用Tailwind,一切都是CSS,通过扩展,你可以悬停在一个类上,看到CSS样式。使用Tailwind会减少你的代码量,这是一个明显的好处。当然,学习新的抽象概念需要时间,而且需要使用工具。

第三,关于“太多的权力,没有约束”的问题。CSS是一门强大的语言,它控制着网页上的外观。然而,它有时很难推理和维护,这就是为什么CSS框架如Bootstrap变得如此流行的原因。Tailwind在这方面有什么好处呢?它可以提供无限定制的同时又有坚实的默认值。这使得每个Tailwind站点/应用看起来都完全不同,易于重构。

最后,关于“僵尸样式”的问题。未使用的CSS可能会使您的网站或应用程序变得臃肿不堪。没有任何阻止您在不同的类或选择器中写入相同样式属性的机制。而Tailwind通过清除未使用的样式来避免这个问题。

这就是Tailwind的争论的要点。但值得注意的是,虽然这些问题在开发者社区中引发了激烈的讨论,但最终用户对此并不关心。他们只关心产品是否能够满足他们的需求,而不在乎你是否选择了Tailwind这个工具。当然,这并不是说Tailwind不是一个强大的工具,只是提醒我们选择工具时要权衡各方面的因素。

对于我个人而言,我是Tailwind的粉丝,尽管刚开始的时候我有点反感。当我第一次接触它时,看着一长串的类名污染了我的HTML,我几乎无法忍受。但克服了最初的反感,我决定尝试一下。使用Tailwind大约30分钟后,我逐渐适应并且爱上了它。正如我曾经在一个只有桌面设计的网页上工作,然后几周后,预料之中地需要为该页面添加响应式设计。在Tailwind的帮助下,我能够在大约15分钟内完成这项任务。这对我来说是一个极大的助力。

最终,无论你选择使用Tailwind还是其他工具,都要记住,决策权在于你和你的团队。用户并不关心你选择了什么工具,只要产品对他们有效即可。当然,Tailwind可以是一个强大的工具,只要你愿意投入时间学习如何使用它。最终,选择权在你手中。