一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請(qǐng)期待?！蓖瑫r(shí)
作者丨Vitalii Shevchuk
編譯丨諾亞
Tailwind CSS是一個(gè)流行的實(shí)用主義優(yōu)先的CSS框架，聲稱可以幫助你更快更容易地創(chuàng)建自定義設(shè)計(jì)。然而，有時(shí)候Tailwind CSS并不那么令人滿意。事實(shí)上，有很多原因可以解釋為什么你應(yīng)該避免使用它，而堅(jiān)持使用純CSS或其他框架。以下是六個(gè)可能會(huì)讓你討厭Tailwind CSS的原因。
1. 它失去了HTML和CSS的語義
2. 它用大量的類污染了你的HTML
3. 它不是可伸縮和可重用的
4. 它產(chǎn)生巨大的CSS文件，損害性能
5. 它只適合那些不想理解和學(xué)習(xí)CSS的人
6. 它有一個(gè)巨大的庫，更容易地學(xué)習(xí)普通的CSS
網(wǎng)站開發(fā)的主要原則之一是將網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為分開。HTML用于提供內(nèi)容的結(jié)構(gòu)和含義，CSS用于提供元素的表示和外觀，JavaScript用于提供網(wǎng)站的行為和交互性。
然而，Tailwind CSS違背了這一原則，因?yàn)樗鼘⒈硎九c結(jié)構(gòu)混合在一起。Tailwind CSS沒有使用有意義和描述性的類名來反映元素的用途和功能，而是使用一般性和隱晦的類名來描述它們的外觀。例如，在Tailwind CSS中，一個(gè)簡單的卡片組件是這樣的：
<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>類名不會(huì)告訴你任何有關(guān)元素的含義或功能的信息。他們只告訴你他們長什么樣。這使得理解和維護(hù)代碼變得困難，因?yàn)槟惚仨氂涀∶總€(gè)類的作用以及它們?nèi)绾斡绊懡M件的布局和設(shè)計(jì)。
與普通CSS相比，在普通CSS中，你可以使用語義和描述性的類名來反映元素的含義和功能：
<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>通過查看每個(gè)元素的類名，你可以很容易地知道每個(gè)元素的作用，還可以通過編輯CSS文件來更改其外觀。
對(duì)Tailwind CSS的一個(gè)主要批評(píng)是，它迫使你編寫由幾十個(gè)實(shí)用程序類組成的HTML，使其難以閱讀和維護(hù)。例如，在Tailwind CSS中，一個(gè)簡單的按鈕是這樣的：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click me</button>與普通CSS相比，在普通CSS中，你可以使用單個(gè)類名并在單獨(dú)的文件中定義樣式：
<button class="btn-blue"> Click me</button>普通CSS比Tailwind CSS更簡潔和語義化。通過查看按鈕的類名，可以很容易地知道按鈕的作用，還可以通過編輯CSS文件更改按鈕的外觀。使用Tailwind CSS時(shí)，你必須記住大量的類名及其含義，并且每次想要調(diào)整設(shè)計(jì)時(shí)都必須修改HTML。
Tailwind CSS提倡將所有樣式放在HTML中，而不是將它們分離到不同的文件或?qū)又?。這違背了web開發(fā)的核心原則之一：關(guān)注點(diǎn)分離。將表示與內(nèi)容混合在一起，就違反了代碼的模塊化和可維護(hù)性。在不同的上下文中或設(shè)備中重用或重寫樣式也變得更加困難。
Tailwind CSS的另一個(gè)問題是它不具有可擴(kuò)展性和可重用性。Tailwind CSS鼓勵(lì)你通過對(duì)每個(gè)元素應(yīng)用多個(gè)實(shí)用工具類來對(duì)其單獨(dú)設(shè)置樣式。但是，這會(huì)導(dǎo)致代碼中的重復(fù)和不一致，因?yàn)槟惚仨殲轭愃频脑刂貜?fù)相同的類，或者為不同的變體稍微更改它們。
例如，假設(shè)你有兩個(gè)看起來相似但顏色不同的按鈕：
<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è)按鈕都有相同的類。這意味著你必須為每個(gè)按鈕重復(fù)相同的類，使你的代碼冗長和冗余。此外，如果你想要更改按鈕的某些內(nèi)容，例如字體大小或邊框半徑，則必須在多個(gè)地方進(jìn)行更改，這會(huì)使代碼容易出現(xiàn)錯(cuò)誤和不一致。
與普通CSS相比，在普通CSS中，你可以為兩個(gè)按鈕使用一個(gè)類名，并為不同的變體使用修飾符或變量：
<button class="btn btn-blue"> Blue button</button><button class="btn btn-red"> Red button</button>你可以為兩個(gè)按鈕使用一個(gè)類名，并為不同的變體使用修飾符或變量。這使你的代碼簡潔一致，并且你可以在一個(gè)地方更改有關(guān)按鈕的某些內(nèi)容。
Tailwind CSS的另一個(gè)缺點(diǎn)是它會(huì)生成巨大的CSS文件，這會(huì)對(duì)網(wǎng)站的性能產(chǎn)生負(fù)面影響。Tailwind CSS提供了數(shù)以千計(jì)的實(shí)用程序類，它們幾乎涵蓋了所有可能的樣式變化。然而，這些類中的大多數(shù)都不會(huì)在你的項(xiàng)目中使用，它們只會(huì)給你的CSS文件增加不必要的膨脹。
根據(jù)官方文檔，默認(rèn)的Tailwind CSS文件大小超過2.4 MB，這對(duì)于生產(chǎn)網(wǎng)站來說太大了。即使在縮小和壓縮文件之后，它仍然保持在46 kB左右，這仍然比大多數(shù)其他CSS框架大。
為了減少文件的大小，Tailwind CSS建議使用一個(gè)名為PurgeCSS的工具，它可以掃描HTML文件，并從CSS文件中刪除任何未使用的類。然而，這為你的構(gòu)建過程增加了一個(gè)額外的步驟，并且如果PurgeCSS未能檢測到在你的代碼中動(dòng)態(tài)地或有條件地使用的一些類，它也會(huì)引入錯(cuò)誤。
Tailwind CSS對(duì)你的CSS學(xué)習(xí)和理解也有負(fù)面影響。通過使用Tailwind CSS，你基本上依賴于一個(gè)聲稱是CSS樣式替換的框架，但實(shí)際上仍然需要你了解CSS樣式才能使用它。例如，你仍然需要知道如何使用flexbox、grid或position屬性來布局元素，但不是直接在CSS文件中使用它們，而是必須使用模仿它們的Tailwind CSS類。
這不僅令人困惑，而且具有誤導(dǎo)性。你不是在學(xué)習(xí)實(shí)際的CSS屬性和值，而是學(xué)習(xí)Tailwind CSS類及其含義。這可能會(huì)讓你認(rèn)為你了解CSS，但實(shí)際上，你只熟悉Tailwind CSS。如果你遇到Tailwind CSS不提供你需要的類的情況，或者如果你想切換到另一個(gè)框架或工具，你將很難理解或編寫實(shí)際的CSS代碼。
Tailwind CSS為每個(gè)可能的場景提供了數(shù)千個(gè)實(shí)用程序類，但這也意味著你必須記住或查找所有這些類及其含義。這可能會(huì)讓人不知所措，而且非常耗時(shí)，特別是如果你是web開發(fā)的新手的話。
此外，Tailwind CSS不遵循CSS的標(biāo)準(zhǔn)命名約定或語法。例如，它使用冒號(hào)或括號(hào)來分隔類名中的單詞，而不是破折號(hào)或駝峰式大小寫。它不使用百分比或像素來指定值，而是使用任意數(shù)字或字母。這會(huì)使你的代碼看起來不一致和不熟悉。
相比之下，學(xué)習(xí)普通的CSS要簡單得多，也更直觀。你只需要學(xué)習(xí)被標(biāo)準(zhǔn)化并被瀏覽器廣泛支持的基本屬性和值。你還可以使用自定義屬性或變量來創(chuàng)建適合你需要的自己的命名約定和值。你還可以使用在線資源或工具以交互式和可視化的方式學(xué)習(xí)和練習(xí)CSS。
參考鏈接：https://itnext.io/top-6-reasons-to-hate-tailwind-css-8009ea96e300
本文鏈接：http://www.www897cc.com/showinfo-26-11908-0.html六個(gè)討厭 Tailwind CSS 的理由
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： Htmx：重塑 Web 交互的未來
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)