Find N3入網(wǎng)：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經(jīng)正式入網(wǎng)，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
Tailwind CSS 是一個受歡迎的“實(shí)用優(yōu)先”的 CSS 框架，聲稱可以幫助你更快、更輕松地創(chuàng)建自定義設(shè)計(jì)。然而，并不是每個人都對 Tailwind CSS 感到滿意。事實(shí)上，有很多原因讓你應(yīng)該避免使用它，而堅(jiān)持使用純 CSS 或其他框架。以下是你應(yīng)該討厭 Tailwind CSS 的主要原因：
Web 開發(fā)的主要原則之一是將你的網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為分開。HTML 旨在為你的內(nèi)容提供結(jié)構(gòu)和含義，CSS 旨在為你的元素提供表現(xiàn)和外觀，而 JavaScript 旨在為你的網(wǎng)站提供行為和交互性。
然而，Tailwind CSS 違反了這一原則，將表現(xiàn)與結(jié)構(gòu)混合在一起。而不是使用反映你的元素的目的和功能的有意義和描述性的類名，Tailwind CSS 使用的是描述它們外觀的通用和難懂的類名。例如，以下是 Tailwind CSS 中的一個簡單卡片組件的樣子：
<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>這些類名并不能告訴你關(guān)于元素的意義或功能的任何信息。它們只告訴你它們是什么樣子。這使得理解和維護(hù)你的代碼變得困難，因?yàn)槟惚仨氂涀∶總€類的作用以及它如何影響你的組件的布局和設(shè)計(jì)。
與此相比，使用純 CSS，你可以使用語義化和描述性的類名，這些類名反映了你的元素的含義和功能：
<div class="card"> <img class="card-image" src="some-image.jpg" alt="Some image"> <div class="card-content"> <div class="card-title">某標(biāo)題</div> <p class="card-text">某文本</p> </div></div>僅通過查看其類名，你就可以輕松地知道每個元素的功能，并通過編輯 CSS 文件來更改其外觀。
Tailwind CSS 的主要批評之一是它迫使你編寫充斥著數(shù)十個實(shí)用程序類的 HTML，使其難以閱讀和維護(hù)。例如，這是 Tailwind CSS 中的一個簡單按鈕的樣子：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 點(diǎn)擊我</button>與此相比，在純 CSS 中，你可以使用單個類名并在單獨(dú)的文件中定義樣式：
<button class="btn-blue"> 點(diǎn)擊我</button>純 CSS 比 Tailwind CSS 更簡潔和語義化。你可以輕松地通過查看其類名來知道按鈕的功能，并通過編輯 CSS 文件來更改其外觀。使用 Tailwind CSS，你必須記住很多類名及其含義，并且每次想要調(diào)整設(shè)計(jì)時都必須修改 HTML。
Tailwind CSS 主張將所有樣式放在你的 HTML 中，而不是將它們分離到不同的文件或?qū)又小＿@違反了 Web 開發(fā)的核心原則之一：關(guān)注點(diǎn)分離。通過將表現(xiàn)與內(nèi)容混合，你違反了代碼的模塊性和可維護(hù)性。你還使在不同的上下文或設(shè)備中重用或覆蓋樣式變得更加困難。
Tailwind CSS 的另一個問題是它不具有可擴(kuò)展性和可重用性。Tailwind CSS 鼓勵你通過對其應(yīng)用多個實(shí)用程序類來單獨(dú)設(shè)置每個元素的樣式。然而，這導(dǎo)致你的代碼中出現(xiàn)重復(fù)和不一致，因?yàn)槟惚仨殲轭愃频脑刂貜?fù)相同的類或?yàn)椴煌淖凅w稍作更改。
例如，假設(shè)你有兩個看起來相似但顏色不同的按鈕：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 藍(lán)色按鈕</button><button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> 紅色按鈕</button>兩個按鈕除背景顏色外都有相同的類。這意味著你必須為每個按鈕重復(fù)相同的類，使你的代碼冗長和多余。此外，如果你想更改按鈕的某些內(nèi)容，例如字體大小或邊框半徑，你必須在多個地方進(jìn)行更改，這使得你的代碼容易出錯和不一致。
與此相比，在純 CSS 中，你可以為兩個按鈕使用單個類名，并使用修飾符或變量進(jìn)行不同的變體：
<button class="btn btn-blue"> 藍(lán)色按鈕</button><button class="btn btn-red"> 紅色按鈕</button>你可以為兩個按鈕使用單個類名，并使用修飾符或變量進(jìn)行不同的變體。這使得你的代碼簡潔且一致，你可以在一個地方更改按鈕的某些內(nèi)容。
Tailwind CSS 的另一個缺點(diǎn)是它生成的 CSS 文件龐大，可能會對你的網(wǎng)站性能產(chǎn)生負(fù)面影響。Tailwind CSS 附帶了數(shù)千個實(shí)用程序類，涵蓋了幾乎所有可能的樣式變體。然而，這些類中的大多數(shù)在你的項(xiàng)目中從未使用過，它們只是為你的 CSS 文件增加了不必要的膨脹。
根據(jù)官方文檔，默認(rèn)的 Tailwind CSS 文件大小超過 2.4 MB，對于生產(chǎn)網(wǎng)站來說太大了。即使在壓縮文件后，它仍然保持在約 46 kB，這仍然比大多數(shù)其他 CSS 框架大。
為了減小文件大小，Tailwind CSS 推薦使用一個名為 PurgeCSS 的工具，該工具掃描你的 HTML 文件并從你的 CSS 文件中刪除任何未使用的類。然而，這為你的構(gòu)建過程增加了額外的步驟，如果 PurgeCSS 未能檢測到在你的代碼中動態(tài)或有條件地使用的某些類，它也可能引入錯誤。
Tailwind CSS 也對你學(xué)習(xí)和理解 CSS 產(chǎn)生了負(fù)面影響。使用 Tailwind CSS，你實(shí)際上是依賴于一個聲稱是 CSS 樣式替代品的框架，但實(shí)際上仍然需要你知道 CSS 樣式來使用它。例如，你仍然需要知道如何使用 flexbox、grid 或 position 屬性來布局你的元素，但是你不是直接在你的 CSS 文件中使用它們，而是使用模仿它們的 Tailwind CSS 類。
以下是文章的翻譯：
Tailwind CSS 也對你學(xué)習(xí)和理解 CSS 產(chǎn)生了負(fù)面影響。使用 Tailwind CSS，你實(shí)際上是依賴于一個聲稱是 CSS 樣式替代品的框架，但實(shí)際上仍然需要你知道 CSS 樣式來使用它。例如，你仍然需要知道如何使用 flexbox、grid 或 position 屬性來布局你的元素，但是你不是直接在你的 CSS 文件中使用它們，而是使用模仿它們的 Tailwind CSS 類。
這不僅令人困惑，而且容易誤導(dǎo)。你并沒有學(xué)習(xí)實(shí)際的 CSS 屬性和值，而是學(xué)習(xí) Tailwind CSS 類及其含義。這可能會讓你認(rèn)為你知道 CSS，但實(shí)際上，你只熟悉 Tailwind CSS。如果你遇到 Tailwind CSS 未提供你需要的類的情況，或者你想切換到另一個框架或工具，你將很難理解或編寫實(shí)際的 CSS 代碼。
Tailwind CSS 為每種可能的場景提供了數(shù)千個實(shí)用程序類，但這也意味著你必須記住或查找所有這些類及其含義。這可能會令人不知所措，尤其是對于 Web 開發(fā)的新手來說。
此外，Tailwind CSS 并不遵循 CSS 的標(biāo)準(zhǔn)命名約定或語法。例如，它不使用破折號或駝峰命名來分隔類名中的單詞，而是使用冒號或括號。它不使用百分比或像素來指定值，而是使用任意的數(shù)字或字母。這可能會使你的代碼看起來不一致和不熟悉。
相比之下，學(xué)習(xí)普通的 CSS 要簡單得多，也更直觀。你只需要學(xué)習(xí)標(biāo)準(zhǔn)化的、得到瀏覽器廣泛支持的基本屬性和值。你還可以使用自定義屬性或變量來創(chuàng)建符合你需求的自己的命名約定和值。你還可以使用在線資源或工具來交互式和直觀地學(xué)習(xí)和練習(xí) CSS。
本文鏈接：http://www.www897cc.com/showinfo-26-13492-0.htmlTailwind CSS 真有那么好嗎？討厭它的前六大原因
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 解密SpringBoot線程池
下一篇： 編寫更清晰代碼：去掉所有多余的類型
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號