本文是 關于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 足跡，并在某種程度上違背了緩存和失效的概念。

希望這篇文章能為你解答有關 CSS 在現實世界中的問題和解決方案。