大家好，我是CUGGZ，今天來分享 GitHub 上一些熱門的 CSS 框架!

1、Bootstrap

Bootstrap是 Twitter 推出的基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的CSS開發框架，使得 Web 開發更加快捷。Bootstrap 提供了優雅的HTML和CSS規范，它由動態CSS語言Less寫成。Bootstrap 推出后頗受歡迎，一直是GitHub上的熱門開源項目。

Bootstrap 的優點：

流行框架： Bootstrap 是最流行的開源項目之一。在遇到問題時可以很容易的找到解決方案。

功能齊全： 它不僅是一個開發框架，還是一個預構建的動態模板，包含很多現成的組件。這可以使任何開發人員，即使沒有前端經驗，也可以更輕松地開發結構良好的頁面。

可定制： 可以輕松定制 Bootstrap。可以使用 npm 安裝項目，導入需要的部分，并使用 CSS 變量自定義幾乎所有內容。

成熟且受支持： Bootstrap 最初由 Twitter 退出，現在由數百名開發人員組成的社區維護，確保穩定發布和長期支持。

Bootstrap 的缺點：

難以覆蓋： Bootstrap 具有非常具體的設計和外觀，如果想要不同的風格，就很難覆蓋。由于它廣泛的使用 CSS 中的!important規則，因此可能很難覆蓋默認值。

依賴 jQuery： 與其他僅支持 CSS 的框架不同，Bootstrap 4 的許多交互功能都依賴于 jQuery。這使得將它與 React 或 Vue 等 JavaScript 框架一起使用變得更加困難，但也不是不可能。不過，在 Boostrap 5 中刪除了 jQuery 依賴項。

依賴繁重： Bootstrap 在項目中非常繁重，盡管可以只導入需要的部分，但它不像其他框架那樣輕量級或模塊化。

GitHub：https://github.com/twbs/bootstrap。

2、 Foundation

Foundation 是一個用于開發響應式的 HTML, CSS 和 JavaScript 框架。它是一個易用、強大而且靈活的框架，用于構建基于任何設備上的 Web 應用，是一個移動優先的流行框架。

實際上，Foundation 不僅僅是一個 CSS 框架，而是一系列前端開發工具。這些工具可以一起使用，也可以完全獨立使用。

Foundation 的優點：

通用風格： 與 Bootstrap 不同，Foundation 沒有為其組件使用獨特的風格。其廣泛的模塊化和靈活的組件具有最小的樣式，并且可以輕松定制。

功能齊全： Foundation 提供了很多內置組件。還可以訪問由開發團隊或社區創建的預定義的 HTML 模板，可以根據需求去使用這些模板。

電子郵件設計： oundation for Emails 可以為任何客戶端創建響應式電子郵件模板，包括舊版本的 Microsoft Outlook。

動畫： Foundation 可以輕松地與 ZURB 的 Motion UI 庫集成，讓我們可以使用內置效果來創建過渡和動畫。

Foundation 的缺點：

學習成本高： Foundation 有很多特性，比其他框架復雜得多。在進行前端布局時，它提供了很大的自由度，所以我們就需要了解這一切是如何工作的。

依賴 Javascript： Foundation 的許多功能都依賴于 Javascript，使用 jQuery 或 Zepto。Zepto 是一個與 jQuery 使用相同語法但占用空間更小的庫。這使得 Foundation 不太適合 React 或 Angular 項目。Zepto 也是一個鮮為人知的庫，沒有多少開發人員熟悉。

GitHub：https://github.com/foundation/foundation-sites。

3、 Bulma

Bulma 是一個免費的開源CSS框架，它提供了現成的前端組件，可以輕松地組合這些組件來構建響應式 Web 界面。Bulma 框架最大的特點就是簡單好用。所有樣式都基于class，只需為 HTML 元素指定class，樣式將立刻生效。

Bulma 的優點：

美學設計： Bulma 它采用簡潔現代的設計，即使不更改默認設置，最終也會得到一個漂亮的網頁。

現代： CSS 的 flexbox 布局使得創建響應式布局變得更加容易，而 Bulma 是最早基于 flexbox 實現的框架之一。

對開發人員友好： Bulma 旨在為開發人員提供出色的體驗。考慮到這一點，Bulma 提供了易于使用和記憶的命名約定。

易于定制： Bulma 的顏色、填充和許多默認屬性都可以使用 SASS 進行定制。這樣，可以在幾分鐘內設置項目的默認值。

沒有 Javascript： Bulma 不包含 JavaScript 功能。由于它是純 CSS 的，因此可以輕松地與 Vue 或 React 等 Javascript 框架集成。

Bulma 的缺點：

獨特的風格： Bulma的獨特風格是一把雙刃劍。由于它非常獨特，如果它被過度使用，最終會得到看起來非常相似的網站，就像 Bootstrap 一樣。

不太完整： Bulma 在許多情況下都在與 Boostrap 競爭，但在可訪問性和其他企業級功能方面并不完整。

GitHub：https://github.com/jgthms/bulma。

4、 Tailwind

Tailwind CSS 是一個功能類優先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的類，它們能直接在HTML中組合起來，構建出任何設計。

Tailwind 的優點：

原子 CSS： Tailwind 通過提供強大的實用程序類使常見的樣式易于實現。這種方法有時被稱為原子 CSS，其中 HTML 元素的類清楚地描述了它的外觀。只需使用指定的class，樣式即可生效。

沒有設計： Tailwind 沒有預制組件或特定的設計語言。所以不必覆蓋現有樣式，在自定義設計時可以提高工作效率。

可重用組件： Tailwind 允許創建自己的自定義組件，可以在整個項目中重用這些組件，還可以在官網上找到一些組件示例。

強大的 PostCSS/SASS 集成： 要充分利用 Tailwind，需要安裝并將其導入 SASS 或 PostCSS 項目。這使可以利用 Tailwind 的所有功能來編寫更有效的 CSS。

Tailwind 的缺點：

學習成本高： 對于經驗不足的開發人員來說，Tailwind 并不是最佳選擇。由于它不提供預制組件，因此需要充分了解前端技術的工作原理。Tailwind 的學習成本較高，必須學習相關語法才能使用該框架高效工作。

不能直接使用： Tailwind 可以作為捆綁的 CSS 文件添加到項目中。但如果這樣添加框架，它的許多功能將不可用，并且將無法使用壓縮版本(壓縮版 27 KB、原始版 348 KB )。要充分利用 Tailwind，需要知道如何使用 Webpack、Gulp 或其他前端構建工具。

GitHub：https://github.com/tailwindlabs/tailwindcss。

5、 UIkit

UIkit 是 YOOtheme 團隊開發的一款輕量級、模塊化的前端框架，可快速構建強大的前端界面。UIKit提供了全面的HTML、CSS、JavaScript組件。它基于LESS開發，代碼結構清晰簡單，易于擴展和維護，并且具有體積小、反應靈敏的響應式組件，可以根據 UIKit 基本的風格樣式，輕松地自定義創建出自己喜歡的主題樣式。

UIkit 的優點：

數十個組件： UIKit 通過數十個組件，可以實現復雜的前端布局。它包括所有典型的實用程序和組件，并且可以訪問高級元素，如導航欄、畫布外邊欄和視差設計等。

可擴展： UIKit 可以使用 LESS 或 SASS 預處理器輕松定制和擴展。

基于 UI 的定制器： UIKit 提供了一個基于 Web 的定制器，可以實時定制設計，然后將 SASS 或 LESS 變量復制到項目中。

UIkit 的缺點：

不適合小型項目： 不建議經驗不足的開發人員使用 UIKit，因為它是一個復雜的框架，需要深入了解。它非常適合高級應用程序，但對于小型項目可能太復雜了。

社區較小： 它不像其他框架那樣受歡迎，遇到問題可能較難找到答案。

GitHub：https://github.com/uikit/uikit。

6、 Milligram

Milligram 提供了最小的樣式設置，以快速和干凈為起點。壓縮后只有 2kb!它為更好的性能和更高的生產力而設計，需要重置的屬性更少，代碼更簡潔。

Milligram 的優點：

極簡 CSS 框架： Milligram 易于設置和上手。盡管它提供了強大的功能來提高生產力，但它在壓縮后僅有 2 KB。

無默認樣式： 與其他框架不同，Milligram 沒有默認樣式。在實現自定義樣式時，無需重置或覆蓋不符合目標的屬性。

易于學習： 上手非常簡單，閱讀官方文檔足以入門。

Milligram 的缺點：

無模板： Milligram 沒有提供預制的模板。

社區較小： Milligram 有一個小而緊密的社區。尋找社區的支持并不像使用更流行的 CSS 框架那么容易。

GitHub：https://github.com/milligram/milligram。

7、Pure

Pure.css是美國雅虎公司出品的一組輕量級、響應式純CSS模塊，適用于任何Web項目。這個框架非常小，在使用所有模塊時壓縮后只有 3.7 KB。

Pure 的優點：

輕量： 每一行 CSS 都經過仔細考慮和編寫，以使框架輕量級和高性能。

可定制： 可以以模塊化方式導入 Pure 并僅實現需要的內容。

支持良好： 與社區項目不同，Pure 得到 Yahoo 的支持，這使得該項目成為長期使用的安全選擇。

現成的組件： Pure 帶有響應式和為現代網絡構建的預制組件。

Pure 的缺點：

不適用于小團隊： Pure 不適合經驗不足或者小型的團隊，因為需要創建自己的設計來使用該框架。

GitHub：https://github.com/pure-css/pure。

8、Tachyons

Tachyons與其他流行的前端框架不同，Tachyons旨在將CSS規則分解為小型的、可管理的、以及可復用的部件。Tachyons可以幫助開發人員創建出具有高度可讀性、能夠快速加載和響應的網站，而且無需使用大量CSS代碼。

Tachyons 的優點：

即用型組件： 盡管 Tachyons 專注于提供出色的實用程序類以提高生產力，但官方文檔也包含許多即用型組件。

多樣化： Tachyons 提供可用于不同設置的功能模板，例如靜態 HTML、Rails、React、Angular 等。

可重復使用： Tachyon 是創建可擴展設計系統的絕佳選擇。該框架允許創建可重用的屬性來構建多樣化和靈活的組件。

Tachyons 的缺點：

主要用于 PostCSS： PostCSS 是使用 Tachyons 的主要方式，但不像 LESS 或 SASS 那樣廣泛使用。Tachyons 確實提供了 SASS 的集成，但它并未得到廣泛使用和支持。

GitHub：https://github.com/tachyons-css/tachyons。

9、Materialize

Materialize是一個使用CSS，JavaScript和HTML創建的UI組件庫。實現UI組件有助于構建有吸引力，一致和功能的網頁和網絡應用程序，同時堅持現代網絡設計原則，如瀏覽器可移植性，設備獨立性和優雅的降級。它有助于創建更快，更美觀，更靈敏的網站。它的靈感來自Google Material Design。

Materialize 的優點：

功能齊全： Materialize CSS 提供了很多預制組件，還帶有更高級的 Javascript 功能來支持交互。

移動友好： 可以使用框架的類似移動設備的組件(例如浮動導航欄和滑動交互)創建漸進式 Web 應用程序。

Materialize 的缺點：

嚴格的設計語言： 如果想做一些不接近材料設計的事情，最好避免使用 Materialise。

獨立項目： Materialise 有一個活躍的社區，但它是一個小型且獨立的項目，沒有企業支持。

GitHub：https://github.com/Dogfalo/materialize。