當前位置：首頁 > 科技 > 軟件

Tailwind CSS vs 現代CSS，Tailwind CSS 會像CSS-in-JS 一樣亡？

來源：責編：時間：2023-11-01 09:18:21 300觀看

導讀本文是關于Tailwind CSS 與現代 CSS之間比較的文章。文章中作者詳細比較了這兩種CSS開發方法的優缺點。他指出，Tailwind CSS是一種基于類的CSS框架，提供了快速開發網站的便利性，但可能導致HTML代碼的臃腫。另一方面，現

本文是關于Tailwind CSS 與現代 CSS之間比較的文章。文章中作者詳細比較了這兩種CSS開發方法的優缺點。他指出，Tailwind CSS是一種基于類的CSS框架，提供了快速開發網站的便利性，但可能導致HTML代碼的臃腫。另一方面，現代CSS方法更加模塊化和可維護，但編寫速度可能較慢。

下面是正文~~

Tailwind 是一個深受喜愛的 CSS 框架，它擁有許多受歡迎的功能，用于創建用戶界面。在本文中，我們不會深入探討 Tailwind，而是要探討 Tailwind 中使用內聯類的問題，以及觸及一些改變我們處理這些問題的新的原生 CSS 功能。

內聯類

內聯類是 Tailwind 的一個備受贊譽的特性。在尋求關于 Tailwind 的反饋時，作者收到了各種各樣的意見，但其中一個觀點引起了作者的關注。這個問題并不是特指 Tailwind，而是更多地關于開發者修改代碼的態度：

“我可以在一個視圖中編輯所有內容”

有些開發者表示，他們喜歡 Tailwind，因為他們可以不切換屏幕就管理他們的 CSS 和 HTML。因此，作者對此持有堅定的立場：

作者強烈建議，管理多個文件或語法應該是工具，如 IDE、文本編輯器、終端或甚至多顯示器的責任，而不應該在代碼庫中解決。

以上并不是特指 Tailwind，而是關于對軟件開發有一個專業的認識。作者不希望這個立場受到反駁，作者相信這是一個成熟的看法。

內聯類的優勢

一個內聯類定義了一個范圍。Rohan 很好地描述了 Tailwind 的這個優勢：

這可能是與傳統 CSS 項目中的不可預測的做事方式相比，Tailwind 最引人注目的優勢。

原生 CSS 中的作用域

幸運的是，現代 CSS 可以與傳統的 CSS 不同地進行作用域化。原生 CSS 至少有兩種方式可以定義范圍。

經過兩個月后：

在級聯層中包裹你想要調整的新樣式。

在嵌套作用域中使用新類。

這兩種方法都使用原生 CSS，并可以達到與 Tailwind 相同的效果，盡管對于某些人來說，可能需要進行一些范式轉變才能習慣。

內聯類的問題

關于內聯類，有一些問題。這些問題可能是微不足道的，也可能是嚴重的，這取決于你的項目或你如何解釋它們。

內聯類有時會變得很重：在撰寫本文時，tailwindcss.com 的著陸 HTML（只是一個方便的案例研究）使用了 tailwind 的內聯類，其大小為 432.5KB。類屬性及其值構成了 249KB 的數據，這意味著頁面大小的 57.6% 來自內聯類。而使用現代本地 CSS 時，這一比例約為 5%-15%。
大量 HTML 會影響你的 PageSpeed Insights 分數：FE 開發人員喜歡說 "但它是經過 gzip 壓縮的，兄弟"，以此來為過大的有效負載辯解。但服務器的 gzip 大小有點誤導。在這種情況下，更重要的問題是 DOM Attr 節點的數據大小對內存的影響，這是內聯樣式的結果。
屬性雜亂：在屬性雜亂問題上，Tailwind 開發人員的立場各不相同。調試在生產和開發代碼中都要進行。任何否認這一點的人，要么是在撒謊，要么就是從未參與過需求量大的大型項目。HTML 沒有源映射，因此盡管進行了縮減，也不能太亂。
高帶寬：我們生活在一個免費云服務的世界里，因此這可能不會成為大多數項目的大問題，但對于超過免費帶寬的高帶寬網站來說，重型 HTML 可能會產生一些額外費用，具體取決于你的云提供商。CSS 樣式表是專門為在 HTTP 概念中進行緩存而設計的。Tailwind的內聯類是HTML文檔的一部分，而HTML文檔的變化通常更為頻繁，一般不會像CSS樣式表那樣被緩存。
重復的樣式方言：Tailwind 將允許你定義內聯類語法，這是一種類似 CSS 的簡化方言。這些類鏈接到框架 CSS 規則。這本身并不是直接的重復，而是在框架代碼的 CSS 中也體現了 CSS 的額外權重。

CSS 嵌套改變了一切

因為嵌套作用域是私有的：

不必為每個元素都定義一個類，只需合理判斷即可。
不再需要遵循 BEM、OOCSS 或其他傳統的 CSS 方法。所有這些都已經過時了。

與 CSS 框架相比，CSS 嵌套和相對選擇器不僅意味著我們定義的內聯類更少，而且與傳統 CSS 項目相比，我們定義的內聯類也更少。

總結

如果你還在使用老式的 CSS，那就停下來吧。想辦法與時俱進吧。也許下面的內容能幫到你，但這已經超出了你的能力范圍（沒有雙關的意思）：

caniuse.com
PostCSS
Nesting 筑巢

在過去 15 年多的時間里，CSS 庫和框架主要依賴于過多的內聯類。Tailwind 也不例外。

在作者看來，嵌套 CSS 和 Tailwind 這樣的 CSS 框架似乎并無必要。建議根據自己的需求選擇其中一種方法。

Tailwind 非常龐大，作者相信從 CSS 到 Tailwind 的影響比從 JS/TS 到 React 還要大。所以不可避免地，會有很多思想領袖和開發者來淡化這篇文章中提到的許多問題。

這里沒有什么新鮮事。當 CSS-in-JS 出現時，我們遇到了類似的情況，在一開始，開發者注意到它正在復制 CSS 足跡，并在某種程度上違背了緩存和失效的概念。