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

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

來(lái)源：責(zé)編：時(shí)間：2023-11-01 09:18:17 245觀看

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

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

下面是正文~~

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

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

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

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

有些開(kā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ì)軟件開(kāi)發(fā)有一個(gè)專(zhuān)業(yè)的認(rèn)識(shí)。作者不希望這個(gè)立場(chǎng)受到反駁，作者相信這是一個(gè)成熟的看法。

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

一個(gè)內(nèi)聯(lián)類(lèi)定義了一個(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)過(guò)兩個(gè)月后：

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

在嵌套作用域中使用新類(lèi)

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

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

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

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

CSS 嵌套改變了一切

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

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

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

總結(jié)

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

caniuse.com
PostCSS
Nesting 筑巢

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

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

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

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

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

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

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