2021年優(yōu)秀的CSS框架有哪幾種

這篇文章主要講解了“2021年優(yōu)秀的CSS框架有哪幾種”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“2021年優(yōu)秀的CSS框架有哪幾種”吧！

有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)建接口的最快方式。

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

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

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

(3) 原子/實(shí)用優(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)隊(duì)。

• 如果設(shè)計是常見的/無設(shè)計：Bulma或Bootstrap

• 如果設(shè)計很復(fù)雜，我有時間：Tailwind css

• 如果設(shè)計是復(fù)雜的，我沒有時間：Bulma +很多自定義CSS

• 如果我需要創(chuàng)建一個設(shè)計系統(tǒng)：Tailwind CSS

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

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

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

對于特定的登陸頁面或非常重點(diǎn)的頁面/ WebApps，Tailwind等實(shí)用框架是完美的。

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

• Foundation太舊，默認(rèn)設(shè)計更難定制

• Bootstrap 4的JS部分依賴于jQuery，但V5似乎很有前途

• Skeleton和Milligram的方式太基本

• Materialize太為自以為是，我認(rèn)為有點(diǎn)過時

Bulma優(yōu)點(diǎn)：

• 大多數(shù)情況下它有很多組件

• 通過SASS默認(rèn)和非常容易自定義它是干凈的

• 它有自己的一套實(shí)用程序，這么好的兩個世界

• 您只加載您需要的東西和易于擴(kuò)展的東西

• DOC清晰，易于閱讀(重要)

Bulma缺點(diǎn)：

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

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

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

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

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

CSS-In-JS或原子CSS框架等樣式組件和ACSS.IO，根本看起來不像CSS。雖然性能有點(diǎn)好，因?yàn)樗谀鷮懙膬?nèi)容創(chuàng)建了樣式表。

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

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

Tailwind缺點(diǎn)：

• 當(dāng)您的項(xiàng)目增長時，編譯可能會慢，但新的JIT編譯器將清除此問題。

• 如果您創(chuàng)建了類似CANVA或GREMFLUS模板建設(shè)者等自定義CSS的應(yīng)用程序，它根本不適用于。

感謝各位的閱讀，以上就是“2021年優(yōu)秀的CSS框架有哪幾種”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對2021年優(yōu)秀的CSS框架有哪幾種這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！