當(dāng)前位置：首頁(yè) > 科技 > 軟件

Tailwind CSS vs 現(xiàn)代CSS，Tailwind CSS 會(huì)像CSS-in-JS 一樣亡？

來源：責(zé)編：時(shí)間：2023-11-01 09:18:21 234觀看

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

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

下面是正文~~

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

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

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

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

有些開發(fā)者表示，他們喜歡 Tailwind，因?yàn)樗麄兛梢圆磺袚Q屏幕就管理他們的 CSS 和 HTML。因此，作者對(duì)此持有堅(jiān)定的立場(chǎng)：

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

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

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

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

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

原生 CSS 中的作用域

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

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

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

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

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

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

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

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

CSS 嵌套改變了一切

因?yàn)榍短鬃饔糜蚴撬接械模?span style="display:none">Yhi28資訊網(wǎng)——每日最新資訊28at.com

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

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

總結(jié)

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

caniuse.com
PostCSS
Nesting 筑巢

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

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

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

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

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

本文鏈接：http://www.tebozhan.com/showinfo-26-16267-0.htmlTailwind CSS vs 現(xiàn)代CSS，Tailwind CSS 會(huì)像CSS-in-JS 一樣亡？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com