CSS 像 Tailwind 这样的框架实际上在编写 CSS 时效率如何？

Question

我已经开始研究现代流行的 css 框架，例如 tailwind。这些框架中的“范例”是在 html 中编写所有 css，本质上是将类应用为属性。例如。如果我想让标题有粗体红色文本，我可以这样写：

<h1 class="font-bold text-red-400">Title</h1>

但是，虽然这可能会使短期内写 CSS 变得更容易，但从长远来看，这似乎是一个非常糟糕的写 CSS 的策略。如果我有 20 个不同的标题并且我决定将它们设为蓝色而不是红色怎么办？然后我将不得不编辑html 20次！如果我只是使用经典方法并写道：

<h1 class="title">Title</h1>
...
<style>
.title{
    font-weight: 700;
    color: rgb(248 113 113);
}
</style>

我只需更新 css 一次即可进行所有更改。虽然它有点冗长，但它的扩展性肯定好得多。事实上，如果我没记错的话，inline css discouraged 不久前不是吗？这不是像 <center> 这样的元素开始被淘汰的原因吗？而tailwind是在大型网站上使用的---所以人们喜欢这种方法肯定是有原因的。它是否以某种我不理解的方式扩展？我能真正看到的唯一真正好处是提供开箱即用的响应式网格，但其他一切似乎比传统方式更有效。

Answer 1

人们使用像 tailwind 这样的东西的主要优点是实用程序 class 用法解释更多关于对元素所做的事情，然后随机 class 名称可以。这使得新员工入职变得更加容易，因为他们可以快速掌握实用程序 classes，然后在浏览 HTML 时了解对某事所做的一切，并做出改变特定项目，而不必担心会意外更改其他内容。缺点通常就是你所说的那样，它真的很难对很多东西进行样式更改，使 HTML 代码看起来很粗糙，并且需要额外学习所有实用程序 classes .

最后我发现大多数人只是将顺风作为一种快速启动和构建原型的方法，但是一旦某个项目变成了更大的项目，就该转向更好的项目了。总的来说，我刚刚在互联网上发现了对顺风的相当大的仇恨。

Answer 2

TailwindCSS 的创建者

This article 谈到了语义 CSS 类的缺点。一个论点是，语义类看起来很难维护，而使用实用程序类（例如在 TailwindCSS 中）比看起来更容易维护。

关于你提到的具体点，Tailwind 旨在充分利用 React 和 Vue 等现代框架中组件的可重用性，因此你最终不会更改 css of 20不同的 title，但只有一个 title 组件重复使用了 20 次。

此方法与内联 css 之间的区别在于，使用实用程序 css 类意味着您有一个 pre-defined 设计系统，其中类, 没有幻数等等。

CSS 像 Tailwind 这样的框架实际上在编写 CSS 时效率如何？

How are CSS frameworks like Tailwind actually more efficient at writing CSS?

html

css

tailwind-css