我在2007年開始學(xué)習(xí)CSS。是的，從那時起，我們已經(jīng)走了很長的路!

在2021年，前端增長太快了。對于每個項目的Scratch執(zhí)行CSS，難以耗時。更不用說，選擇正確的CSS框架也不是一項簡單的任務(wù)。

我經(jīng)常看到初級前端或后端開發(fā)人員問：什么是最好的CSS框架?

因此，在多年來學(xué)習(xí)和使用很多CSS技術(shù)之后，我想和你分享我認(rèn)為今天最好的CSS UI框架。

> CSS UI Frameworks in 2021

有3種CSS框架

在我們潛入之前，您需要了解3種不同類型的CSS框架。做出正確的選擇很重要。

(1) 預(yù)處理器和CSS變壓器

這些是構(gòu)建時框架，默認(rèn)情況下它們不會輸出CSS。

它們添加了不存在的功能，用于更快地編寫CSS。

我使用的著名人士是：SASS，Less，Stylus和PostCSS。

每個都有基于它們的其他框架或插件。例如，有SASS編寫的SASS，以更快地創(chuàng)建網(wǎng)格布局。

您經(jīng)常會看到它們包含在前端框架或booterplates中。

它們不是CSS UI框架。

(2) 基于UI套件和組件的CSS框架

這些是最常用的CSS框架。

他們帶有預(yù)建和自主的UI。這是我知道使用CSS創(chuàng)建接口的最快方式。

但他們也有他們的缺點。HTML結(jié)構(gòu)主要是預(yù)定義的，并且設(shè)計并不總是容易自定義。

簡而言之：他們非常自以為是。

我自2011年以來使用的那些：Bootstrap，F(xiàn)oundation，Skeleton，Materialize，Milligram和Bulma。

(3) 原子/實用優(yōu)先的CSS框架

原子CSS和效用 - 第一CSS是非常相似的概念，我甚至?xí)f同樣的話，它在過去的3〜4年里變得非常受歡迎。

這兩個主要原因是：React 風(fēng)格 - 組件和TailwindCSS。

簡而言之：這兩個概念都包括在HTML上直接編寫CSS類或?qū)傩浴?/p>

因此，它非常靈活，您可以創(chuàng)建所需的HTML結(jié)構(gòu)，但它的方式速度慢，而不是與基于組件的CSS框架。

如果您已閱讀其他郵件，則會了解我在哪里。

好的，那么最好的CSS框架是什么?

• 對我來說，最好的框架取決于3件事：設(shè)計，時間，團(tuán)隊。
• 如果設(shè)計是常見的/無設(shè)計：Bulma或Bootstrap
• 如果設(shè)計很復(fù)雜，我有時間：Tailwind css
• 如果設(shè)計是復(fù)雜的，我沒有時間：Bulma +很多自定義CSS
• 如果我需要創(chuàng)建一個設(shè)計系統(tǒng)：Tailwind CSS

根據(jù)我的團(tuán)隊的規(guī)模和技能，我不會選擇同樣的工具，并且在一些非常罕見的場合，我會從頭開始做CSS。

如您所見：所有情況下都沒有完美的框架。

對于大多數(shù)場景，如WebApps，Admin Dashboards和Common Randing頁面，基于組件的框架，如Bulma是完美的。

對于特定的登陸頁面或非常重點的頁面/ WebApps，Tailwind等實用框架是完美的。

好的，為什么要Bulma要優(yōu)于Bootstrap和其它選項?

• Foundation太舊，默認(rèn)設(shè)計更難定制
• Bootstrap 4的JS部分依賴于jQuery，但V5似乎很有前途
• Skeleton和Milligram的方式太基本
• Materialize太為自以為是，我認(rèn)為有點過時

Bulma優(yōu)點：

• 大多數(shù)情況下它有很多組件
• 通過SASS默認(rèn)和非常容易自定義它是干凈的
• 它有自己的一套實用程序，這么好的兩個世界
• 您只加載您需要的東西和易于擴(kuò)展的東西
• DOC清晰，易于閱讀(重要)

Bulma缺點：

• 一切都不是可定制的，在某些情況下，您需要使CSS覆蓋

為什么Tailwind優(yōu)于其它樣式組件?

Tailewind CSS有一個偉大的文檔，并且始終在改善!

他們添加了CSS漸變，本機(jī)網(wǎng)格和轉(zhuǎn)換為實用程序，這似乎是由于可能的組合的數(shù)量而不可能。

Tailwind CSS還基于它的大量預(yù)構(gòu)造模板，就像官方的Tailewind UI等。

CSS-In-JS或原子CSS框架等樣式組件和ACSS.IO，根本看起來不像CSS。雖然性能有點好，因為它基于您寫的內(nèi)容創(chuàng)建了樣式表。

但我更傾向于在略微更好的性能下分離擔(dān)憂。

其他實用程序 - 首先框架我試過像Tachyons我們也不夠自然。Tailwind似乎是最自然和開發(fā)者的友好。

Tailwind缺點：

• 當(dāng)您的項目增長時，編譯可能會慢，但新的JIT編譯器將清除此問題。
• 如果您創(chuàng)建了類似CANVA或GREMFLUS模板建設(shè)者等自定義CSS的應(yīng)用程序，它根本不適用于。

結(jié)論

Bulma對我來說是基于組件的最佳CSS框架，但我不會為特定設(shè)計使用它或創(chuàng)建我自己的UI-kit或設(shè)計系統(tǒng)。

Tailwind如果需要為您創(chuàng)建UI套件，設(shè)計系統(tǒng)或設(shè)計特定頁面，則為我最佳原子/實用程序 - 首先CSS框架。

在這兩種情況下，您仍然需要為中到大項目編寫一些CSS。沒有銀彈。

目前在Beta的Bootstrap V5似乎非常有前途與它自己的SVG圖標(biāo)，

我希望這使得CSS世界對您有點更清晰。

原文鏈接：https://itnext.io/yes-heres-the-best-css-framework-in-2021-2c9eb2ced678