likes
comments
collection
share

要喷也得先做做功课吧？驳Tailwind不好论

作者站长头像
站长
· 阅读数 85

更让人气愤的内容则来自于这些文章的评论区，一大堆自以为是的人根本没用过Tailwind，就各种来挑刺，截至目前Tailwind周下载量达到169万，npm顶流react是539万，这么大量的用户如果Tailwind是一个具有明显瑕疵的工具，这么多人都是傻子而你最懂是么？你可以评价一个工具没有问题，但前提是你真的用过，了解他的设计目的，解决了哪些问题，以及他确实存在的一些问题，然后再来客观的讨论，根本没理解一个工具就瞎评论只能显得你蠢，以及显得国内技术社区是多么的Low。

要喷也得先做做功课吧？驳Tailwind不好论

OK，先在文章开始发泄了一些情绪，接下去进入文章的内容，今天就以一篇刚看到的文章为引子，来回应一下文章内容以及评论区出现的对于Tailwind的一些评价。我只针对文章内容，并不针对作者本身，也希望大家可以一起理性客观地参与讨论。

语义化 VS 原子化

文章作者第一点提到地就是语义化VS原子化，

作者观点

他举例：

.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

他认为这是语义化地css定义。

所以，对于采用语义化CSS规范的项目，重点在于如何为组件定义语义。这就诞生了很多类名定义规则，比如，下面是BEM(Block Element Modifier)规范的定义

我的回应

这么比较是非常不合理地，这个class是你在项目中定义地，你如何说明其语义？作为项目开发者，每个人对于同一个需求定义类名字可以是千奇百怪地，比如这个例子，你可以叫他chat-notification，但另外一个人可能叫他chat-toast，他们要实现的是完全一样的，这种gap项目协作中非常常见，你很难要求每个人对于同一个需求起类名完全一致。

而且你拿项目开发中开发者定义的class类名和一个类库的类名来对比就很奇怪，他们就不是一个层面的东西，而且Tailwind也有@apply规则，你同样可以自定你的class名字并使用Tailwind规则：

.chat-notification {
    @apply flex max-2-6 my-0 mx-auto p-2 rounded bg-white.
}

使用Tailwind并不会剥夺你在项目中自定义class的权利。

事实上你要对比语义化和原子化，你应该拿两个库来对比，比如：Bootstrap Vs Tailwind

其实历史已经告诉我们结果，bootstrap已经消失在时代的长河里面，而Tailwind(like)已经崭露头角。你要问为什么？简单的举一个例子，Tailwind有一个组件库叫Daisyui，Tailwind可以轻松做到定义一个和bootstrap类似的语义化classname类库，而在使用daisyui的时候，如果你对默认的样式不满意，你随时可以在btn基础上加上Tailwind的class比如w-full来扩展他，但是你用bootstrap呢？原子化的一个最大优势之一**（注意只是之一，不要看到这里就觉得这就是唯一的优势）** 就是非常灵活，你可以随意排列组合得到你自己想要的结果。

Design System

作者观点

作者提到的第二个点是说设计系统（design system），他的原话：

为了减少前端工程师的上手门槛，这套页面产出流程对前端隐藏了设计系统的存在。

以国内前端常用的蓝湖举例，在前端界面选定元素后，右边界面会显示该元素的CSS规则。

使用时，不需要了解设计系统，只需要一键复制CSS规则，再粘贴到项目中就行

我的回应

我看到的时候是有点不敢相信地，真的有人直接从设计工具里面复制css直接用吗？你不考虑封装组件地么？你的组件不复用地么？你不考虑哪一天你的应用主题色要变么？

作者把设计系统细节隐藏在设计人员在使用设计工具地过程中我觉得是非常不合适地，正经地设计系统应该是在Design和Develop之间互通地，通过定义好的token来排除设计和开发的gap，换个更直观地说法，大家应该都知道主题地概念，你用组件库都会有一套主题，这些主题其实就是一系列地token，一系列地css变量（或者css in js里面地theme值），你页面的样式是需要消费这些变量来开发的，而不是直接hard code一个颜色宽度值。

比如antd的theme

所以你的样式解决方案是必然需要提供自定义主题的功能的，这也是Design System能力的表现，而Tailwind是天然支持自定义主题的，而且Tailwind的类名本身用的就是token，这是非常自然的设计系统，这甚至是Tailwind引以为傲的优势。。。我不理解有人会用Design System来说Tailwind不行。

作者甚至还说到：

  1. 需要学习TailwindCSS，从语义化CSS转换到原子化CSS`
  2. 需要学习设计系统的知识

语义化这点参考我上面说的，如果你用语义化的库，比如bootstrap，你也是需要学习的，这个没什么区别。我们主要来说说第二点，这年头主流的前端框架组件库还有不带样式自定义功能的么？那么这些组件库的设计系统你是不是需要学习？或者说你做的项目小到不需要在项目里实现设计系统，直接一个个hard code样式值？不理解，真的不理解

另外如果你要非得说不能直接从设计工具复制代码，这也是不正确的，毕竟这是工具开发者可以提供的功能，比如www.figma.com/community/f… Figma就可以直接生成Tailwind的模板，连HTML都给你生成好哦。

size

最后作者举了一个例子说Tailwind的优势就是可以减少总体代码量，让我不禁有点想笑，因为：

社区经常诟病说Tailwind每次写class都要重复一大串，而你自己顶一个类名就可以在多个节点重复使用，你的样式只有一份，所以当相同样式使用的节点越多，Tailwind重复的代码越多，体积也就越大

比如他那个例子里面，你把

<div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
</div>

重复十次，你的css量都是一份，但是到Tailwind这里：

<div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
</div>

就变成了text-xl font-medium text-black这些classname要重复10次，这里类名用的少，想想一下这里有10个类名的case，是不是就懂了？

当然这个问题也不是什么大问题，现在都是以组件为单位，你的class名在组件中写了一遍就可以随着组件一起被复用了，不太会有非常多重复的情况，如果有你应该要考虑把这些重复逻辑封装成组件。

总结

在总结之前我们再看看Tailwind文章中经常能看到的评论：

我就想知道后面接手的人怎么维护

规范明确强硬还好, 如果页面样式甚至布局反复修改, 简直噩梦

这调样式得多痛苦啊

总结一下这些人的问题无非就是：

  • 可维护性差
  • 可读性差
  • 难以调试

我基本可以断定这些人就没真正在项目中用过Tailwind，因为真正用过的人不会有这些感受，还是那句话，如果连最基本的这几个点都达不到，不可能达到weekly download 169k，其他开发者不是傻子，难用的东西不会流行，就是这么简单。

虽然我不想浪费时间给这些用都没用过就喷的人讲道理，但是为了推广Tailwind，我还是简单回应一下。

首先可读性，Tailwind这种看到类名就知道样式的做法，我不明白到底哪里可读性差？是你不懂英文？即便没用过人在看到别人写的代码，都能猜出个50%以上把，比如flex w-full justify-between，你真的猜不出来他的样式？还有人觉得自己定义class更好读，是，你自己在写的时候定义一个chat-notification的class，你自己是知道是什么样式，那你的同事呢？他们不去看你的css文件能知道你写了啥？而且你这class用完了，过一个月你再回来试试，你不翻代码你能知道你写了啥？啥叫可读性，你看到名字就知道结果才叫可读性，只是因为字少就觉得可读就让我很无语。

再来说说可维护性，一方面上面说了所见即所得，所以后面的人看到你的代码也能立即知道你写的是啥，删除class也没有任何心理负担，因为他知道他删了啥。什么叫可维护性差呢？你自己定义了一个chat-notification类之后，过一个月你想给他加一个样式，你敢直接加么？你是不是要搜一遍项目看看你的类别的地方有没有用？如果别的地方有用你是不是就不敢加，就要再起一个新的class？那这个class一个月后是不是又有一样的问题？你改样式是不是还得两个文件之间切来切去，用Tailwind不比你快很多么？

最后，难以调试，所见即所得，再见。

OK，说完了，我并不是说Tailwind秒杀一切就是最终银弹了，但是讲道理，大家都是做技术的，喷也要喷到点上，你总得先实际用过才能说明白他好不好吧，做技术的人想要提升，就少说话多做事，没用过的东西一句风凉话“这东西不行啊，我觉得啥啥啥不对”，那你就永远不会成长。

转载自:https://juejin.cn/post/7281444255121113103
评论
请登录