2021年優秀的CSS框架有哪幾種

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

有3種CSS框架

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

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

這些是構建時框架，默認情況下它們不會輸出CSS。

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

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

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

您經常會看到它們包含在前端框架或booterplates中。

它們不是CSS UI框架。

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

這些是最常用的CSS框架。

他們帶有預建和自主的UI。這是我知道使用CSS創建接口的最快方式。

但他們也有他們的缺點。HTML結構主要是預定義的，并且設計并不總是容易自定義。

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

我自2011年以來使用的那些：Bootstrap，Foundation，Skeleton，Materialize，Milligram和Bulma。

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

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

這兩個主要原因是：React 風格 - 組件和TailwindCSS。

簡而言之：這兩個概念都包括在HTML上直接編寫CSS類或屬性。

因此，它非常靈活，您可以創建所需的HTML結構，但它的方式速度慢，而不是與基于組件的CSS框架。

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

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

• 對我來說，最好的框架取決于3件事：設計，時間，團隊。

• 如果設計是常見的/無設計：Bulma或Bootstrap

• 如果設計很復雜，我有時間：Tailwind css

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

• 如果我需要創建一個設計系統：Tailwind CSS

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

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

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

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

好的，為什么要Bulma要優于Bootstrap和其它選項?

• Foundation太舊，默認設計更難定制

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

• Skeleton和Milligram的方式太基本

• Materialize太為自以為是，我認為有點過時

Bulma優點：

• 大多數情況下它有很多組件

• 通過SASS默認和非常容易自定義它是干凈的

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

• 您只加載您需要的東西和易于擴展的東西

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

Bulma缺點：

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

為什么Tailwind優于其它樣式組件?

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

他們添加了CSS漸變，本機網格和轉換為實用程序，這似乎是由于可能的組合的數量而不可能。

Tailwind CSS還基于它的大量預構造模板，就像官方的Tailewind UI等。

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

但我更傾向于在略微更好的性能下分離擔憂。

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

Tailwind缺點：

• 當您的項目增長時，編譯可能會慢，但新的JIT編譯器將清除此問題。

• 如果您創建了類似CANVA或GREMFLUS模板建設者等自定義CSS的應用程序，它根本不適用于。

感謝各位的閱讀，以上就是“2021年優秀的CSS框架有哪幾種”的內容了，經過本文的學習后，相信大家對2021年優秀的CSS框架有哪幾種這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！