作者丨Vitalii Shevchuk

編譯丨諾亞

Tailwind CSS是一個(gè)流行的實(shí)用主義優(yōu)先的CSS框架，聲稱(chēng)可以幫助你更快更容易地創(chuàng)建自定義設(shè)計(jì)。然而，有時(shí)候Tailwind CSS并不那么令人滿(mǎn)意。事實(shí)上，有很多原因可以解釋為什么你應(yīng)該避免使用它，而堅(jiān)持使用純CSS或其他框架。以下是六個(gè)可能會(huì)讓你討厭Tailwind CSS的原因。

1. 它失去了HTML和CSS的語(yǔ)義

2. 它用大量的類(lèi)污染了你的HTML

3. 它不是可伸縮和可重用的

4. 它產(chǎn)生巨大的CSS文件，損害性能

5. 它只適合那些不想理解和學(xué)習(xí)CSS的人

6. 它有一個(gè)巨大的庫(kù)，更容易地學(xué)習(xí)普通的CSS

1、它失去了HTML和CSS的語(yǔ)義

網(wǎng)站開(kāi)發(fā)的主要原則之一是將網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為分開(kāi)。HTML用于提供內(nèi)容的結(jié)構(gòu)和含義，CSS用于提供元素的表示和外觀，JavaScript用于提供網(wǎng)站的行為和交互性。

然而，Tailwind CSS違背了這一原則，因?yàn)樗鼘⒈硎九c結(jié)構(gòu)混合在一起。Tailwind CSS沒(méi)有使用有意義和描述性的類(lèi)名來(lái)反映元素的用途和功能，而是使用一般性和隱晦的類(lèi)名來(lái)描述它們的外觀。例如，在Tailwind CSS中，一個(gè)簡(jiǎn)單的卡片組件是這樣的：

<div class="max-w-sm rounded overflow-hidden shadow-lg">
 <img class="w-full" src="some-image.jpg" alt="Some image">
 <div class="px-6 py-4">
 <div class="font-bold text-xl mb-2">Some title</div>
 <p class="text-gray-700 text-base">Some text</p>
 </div>
</div>

類(lèi)名不會(huì)告訴你任何有關(guān)元素的含義或功能的信息。他們只告訴你他們長(zhǎng)什么樣。這使得理解和維護(hù)代碼變得困難，因?yàn)槟惚仨氂涀∶總€(gè)類(lèi)的作用以及它們?nèi)绾斡绊懡M件的布局和設(shè)計(jì)。

與普通CSS相比，在普通CSS中，你可以使用語(yǔ)義和描述性的類(lèi)名來(lái)反映元素的含義和功能：

<div class="card">
  <img class="card-image" src="some-image.jpg" alt="Some image">
  <div class="card-content">
    <div class="card-title">Some title</div>
    <p class="card-text">Some text</p>
  </div>
</div>

通過(guò)查看每個(gè)元素的類(lèi)名，你可以很容易地知道每個(gè)元素的作用，還可以通過(guò)編輯CSS文件來(lái)更改其外觀。

2、它用大量的類(lèi)污染了你的HTML

對(duì)Tailwind CSS的一個(gè)主要批評(píng)是，它迫使你編寫(xiě)由幾十個(gè)實(shí)用程序類(lèi)組成的HTML，使其難以閱讀和維護(hù)。例如，在Tailwind CSS中，一個(gè)簡(jiǎn)單的按鈕是這樣的：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

與普通CSS相比，在普通CSS中，你可以使用單個(gè)類(lèi)名并在單獨(dú)的文件中定義樣式：

<button class="btn-blue">
  Click me
</button>

普通CSS比Tailwind CSS更簡(jiǎn)潔和語(yǔ)義化。通過(guò)查看按鈕的類(lèi)名，可以很容易地知道按鈕的作用，還可以通過(guò)編輯CSS文件更改按鈕的外觀。使用Tailwind CSS時(shí)，你必須記住大量的類(lèi)名及其含義，并且每次想要調(diào)整設(shè)計(jì)時(shí)都必須修改HTML。

Tailwind CSS提倡將所有樣式放在HTML中，而不是將它們分離到不同的文件或?qū)又?。這違背了web開(kāi)發(fā)的核心原則之一：關(guān)注點(diǎn)分離。將表示與內(nèi)容混合在一起，就違反了代碼的模塊化和可維護(hù)性。在不同的上下文中或設(shè)備中重用或重寫(xiě)樣式也變得更加困難。

3、它不是可伸縮和可重用的

Tailwind CSS的另一個(gè)問(wèn)題是它不具有可擴(kuò)展性和可重用性。Tailwind CSS鼓勵(lì)你通過(guò)對(duì)每個(gè)元素應(yīng)用多個(gè)實(shí)用工具類(lèi)來(lái)對(duì)其單獨(dú)設(shè)置樣式。但是，這會(huì)導(dǎo)致代碼中的重復(fù)和不一致，因?yàn)槟惚仨殲轭?lèi)似的元素重復(fù)相同的類(lèi)，或者為不同的變體稍微更改它們。

例如，假設(shè)你有兩個(gè)看起來(lái)相似但顏色不同的按鈕：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Blue button
</button>

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  Red button
</button>

除了背景顏色不同，兩個(gè)按鈕都有相同的類(lèi)。這意味著你必須為每個(gè)按鈕重復(fù)相同的類(lèi)，使你的代碼冗長(zhǎng)和冗余。此外，如果你想要更改按鈕的某些內(nèi)容，例如字體大小或邊框半徑，則必須在多個(gè)地方進(jìn)行更改，這會(huì)使代碼容易出現(xiàn)錯(cuò)誤和不一致。

與普通CSS相比，在普通CSS中，你可以為兩個(gè)按鈕使用一個(gè)類(lèi)名，并為不同的變體使用修飾符或變量：

<button class="btn btn-blue">
  Blue button
</button>

<button class="btn btn-red">
  Red button
</button>

你可以為兩個(gè)按鈕使用一個(gè)類(lèi)名，并為不同的變體使用修飾符或變量。這使你的代碼簡(jiǎn)潔一致，并且你可以在一個(gè)地方更改有關(guān)按鈕的某些內(nèi)容。

4、它產(chǎn)生巨大的CSS文件，損害性能

Tailwind CSS的另一個(gè)缺點(diǎn)是它會(huì)生成巨大的CSS文件，這會(huì)對(duì)網(wǎng)站的性能產(chǎn)生負(fù)面影響。Tailwind CSS提供了數(shù)以千計(jì)的實(shí)用程序類(lèi)，它們幾乎涵蓋了所有可能的樣式變化。然而，這些類(lèi)中的大多數(shù)都不會(huì)在你的項(xiàng)目中使用，它們只會(huì)給你的CSS文件增加不必要的膨脹。

根據(jù)官方文檔，默認(rèn)的Tailwind CSS文件大小超過(guò)2.4 MB，這對(duì)于生產(chǎn)網(wǎng)站來(lái)說(shuō)太大了。即使在縮小和壓縮文件之后，它仍然保持在46 kB左右，這仍然比大多數(shù)其他CSS框架大。

為了減少文件的大小，Tailwind CSS建議使用一個(gè)名為PurgeCSS的工具，它可以?huà)呙鐷TML文件，并從CSS文件中刪除任何未使用的類(lèi)。然而，這為你的構(gòu)建過(guò)程增加了一個(gè)額外的步驟，并且如果PurgeCSS未能檢測(cè)到在你的代碼中動(dòng)態(tài)地或有條件地使用的一些類(lèi)，它也會(huì)引入錯(cuò)誤。

5、它只適合那些不想理解和學(xué)習(xí)CSS的人

Tailwind CSS對(duì)你的CSS學(xué)習(xí)和理解也有負(fù)面影響。通過(guò)使用Tailwind CSS，你基本上依賴(lài)于一個(gè)聲稱(chēng)是CSS樣式替換的框架，但實(shí)際上仍然需要你了解CSS樣式才能使用它。例如，你仍然需要知道如何使用flexbox、grid或position屬性來(lái)布局元素，但不是直接在CSS文件中使用它們，而是必須使用模仿它們的Tailwind CSS類(lèi)。

這不僅令人困惑，而且具有誤導(dǎo)性。你不是在學(xué)習(xí)實(shí)際的CSS屬性和值，而是學(xué)習(xí)Tailwind CSS類(lèi)及其含義。這可能會(huì)讓你認(rèn)為你了解CSS，但實(shí)際上，你只熟悉Tailwind CSS。如果你遇到Tailwind CSS不提供你需要的類(lèi)的情況，或者如果你想切換到另一個(gè)框架或工具，你將很難理解或編寫(xiě)實(shí)際的CSS代碼。

6、它有一個(gè)巨大的庫(kù)，更容易學(xué)習(xí)正常的CSS

Tailwind CSS為每個(gè)可能的場(chǎng)景提供了數(shù)千個(gè)實(shí)用程序類(lèi)，但這也意味著你必須記住或查找所有這些類(lèi)及其含義。這可能會(huì)讓人不知所措，而且非常耗時(shí)，特別是如果你是web開(kāi)發(fā)的新手的話(huà)。

此外，Tailwind CSS不遵循CSS的標(biāo)準(zhǔn)命名約定或語(yǔ)法。例如，它使用冒號(hào)或括號(hào)來(lái)分隔類(lèi)名中的單詞，而不是破折號(hào)或駝峰式大小寫(xiě)。它不使用百分比或像素來(lái)指定值，而是使用任意數(shù)字或字母。這會(huì)使你的代碼看起來(lái)不一致和不熟悉。

相比之下，學(xué)習(xí)普通的CSS要簡(jiǎn)單得多，也更直觀。你只需要學(xué)習(xí)被標(biāo)準(zhǔn)化并被瀏覽器廣泛支持的基本屬性和值。你還可以使用自定義屬性或變量來(lái)創(chuàng)建適合你需要的自己的命名約定和值。你還可以使用在線資源或工具以交互式和可視化的方式學(xué)習(xí)和練習(xí)CSS。

參考鏈接：https://itnext.io/top-6-reasons-to-hate-tailwind-css-8009ea96e300