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

下面是正文~~

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

內(nèi)聯(lián)類

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

“我可以在一個視圖中編輯所有內(nèi)容”

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

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

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

內(nèi)聯(lián)類的優(yōu)勢

一個內(nèi)聯(lián)類定義了一個范圍。Rohan 很好地描述了 Tailwind 的這個優(yōu)勢：

這可能是與傳統(tǒng) CSS 項目中的不可預(yù)測的做事方式相比，Tailwind 最引人注目的優(yōu)勢。

原生 CSS 中的作用域

幸運的是，現(xiàn)代 CSS 可以與傳統(tǒng)的 CSS 不同地進(jìn)行作用域化。原生 CSS 至少有兩種方式可以定義范圍。

經(jīng)過兩個月后：

在級聯(lián)層中包裹你想要調(diào)整的新樣式。

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

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

內(nèi)聯(lián)類的問題

關(guān)于內(nèi)聯(lián)類，有一些問題。這些問題可能是微不足道的，也可能是嚴(yán)重的，這取決于你的項目或你如何解釋它們。

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

CSS 嵌套改變了一切

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

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

與 CSS 框架相比，CSS 嵌套和相對選擇器不僅意味著我們定義的內(nèi)聯(lián)類更少，而且與傳統(tǒng) CSS 項目相比，我們定義的內(nèi)聯(lián)類也更少。

總結(jié)

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

• caniuse.com
• PostCSS
• Nesting 筑巢

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

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

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

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

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