截至 2020 年 2 月最受程序員歡迎的 20 個 CSS 框架，有沒有你的菜？

前言

轉眼間 2020 年已經過去了一個月，在祈禱疫情儘快消散的同時，不要忘了學習。本文爲大家蒐羅了 20 款截至目前最受程序員歡迎的前端CSS框架，其中有的霸榜已久，也有不少後起之秀，有的是單純的 CSS 框架，也有的結合了 JavaScript 以提供更豐富的功能。一起來看看有沒有你的菜，以下按照 GitHub Star 數量進行排序。

“我自己是一名從事了6年web前端開發的老程序員（我的微信：web-xxq），今年年初我花了一個月整理了一份最適合2019年自學的web前端全套培訓教程（視頻+源碼+筆記+項目實戰），從最基礎的HTML+CSS+JS到移動端HTML5以及各種框架和新技術都有整理，打包給每一位前端小夥伴，這裏是前端學習者聚集地，歡迎初學和進階中的小夥伴（所有前端教程關注我的微信公衆號：web前端學習圈，關注後回覆“2020”即可領取）。

1. Bootstrap

Bootstrap 無疑是目前使用最廣泛的 CSS 框架，GitHub 上近 14 萬的 Star 數就足以說明問題。優點有很多，比如響應式設計，海量資源且簡單易學。不過也有人吐槽 Bootstrap 稍顯臃腫，而且在使用人數太多且不定製化的情況下，容易導致很多網站外觀千篇一律。

官網：https://getbootstrap.com/

GitHub：https://github.com/twbs/boots...

GitHub Stars：138k

2. Animate.css

提供了極其豐富的動畫效果，就像它的名字一樣，可以爲你的網站增添不少活力。

官網：https://daneden.github.io/ani...

GitHub：https://github.com/daneden/an...

GitHub Stars：64.6k

3. Semantic UI

用戶友好程度非常高的響應式前端框架，擁有豐富的插件和主題，可以利用它快速搭建美觀的前端頁面，不過目前這個框架的維護不是很活躍。

官網：https://semantic-ui.com/

GitHub：https://github.com/Semantic-O...

GitHub Stars：47.3k

4. Bulma

相比Bootstrap，Bulma 絕對算是後起之秀了，而且其上升勢頭相當迅猛，這是一個基於 Flexbox 佈局模型的純粹的 CSS 開源框架，Bulma的主要特徵有100%響應式設計、模塊化、現代化，對其他老牌框架審美疲勞的小夥伴可以試試。

官網：https://bulma.io/

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

GitHub Stars：38.4k

5. Materialize

谷歌開源的前端框架，基於谷歌的 Material Design 風格，很適合網站和安卓平臺。

官網：https://materializecss.com/

GitHub：https://github.com/Dogfalo/ma...

GitHub Stars：37.1k

6. Foundation

相比其他前端框架，Foundation 除了擁有豐富的 web 應用框架之外，還有專業的電子郵件框架，而且具備超強的可讀性、靈活性和可定製化的特點，使得它成爲惠普、亞馬遜等諸多大企業的選擇，不過學習難度略高。

官網：https://foundation.zurb.com/

GitHub：https://github.com/foundation...

GitHub Stars：28.5k

7. Pure.css

雅虎開源的輕量級純 CSS 框架，基於 Normalize.css 構建，對各種瀏覽器的兼容性很好，開發人員可以使用其柵格設計和菜單創建高度響應式的頁面佈局。

官網：https://purecss.io/

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

GitHub Stars：20.5k

8. Tailwind

相比其他的 CSS 框架，Tailwind 在可定製這一點上可以說是完勝，這對於喜歡自己動手的小夥伴來說極具吸引力。

官網：https://tailwindcss.com/

GitHub：https://github.com/tailwindcs...

GitHub Stars：19.1k

9. Skeleton

響應迅速的輕量級 CSS 框架，適合用於小項目。

官網：http://getskeleton.com/

GitHub：https://github.com/dhg/Skeleton

GitHub Stars：17.3k

10. UIkit

輕量級且功能豐富，響應式設計，其統一的 UI 樣式和靈活的自定義選項可以幫助開發人員快速搭建美觀、簡潔且模塊化的網站頁面。

官網：https://getuikit.com/

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

GitHub Stars：15.4k

11. NES.css

與衆不同的像素風格有沒有吸引到你？

官網：https://nostalgic-css.github....

GitHub：https://github.com/nostalgic-...

GitHub Stars：14.2k

12. Spectre

正如其官網介紹的那樣，Spectre.css 是一個輕量級、響應式和現代化的 CSS 框架，同樣是基於 Flexbox 佈局創建。

官網：https://picturepan2.github.io...

GitHub：https://github.com/picturepan...

GitHub Stars：9.9k

13. Miligram

號稱最輕量級的 CSS 框架，但是麻雀雖小，五臟俱全，擁有完整的 web 開發工具。

官網：https://milligram.io/

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

GitHub Stars：8.5k

14. Susy

基於 Sass 的輕量級柵格佈局框架，可以幫助開發人員簡化響應式柵格佈局的開發流程。

官網：https://www.oddbird.net/susy/

GitHub：https://github.com/oddbird/susy

GitHub Stars：3.9k

15. Picnic

Picnic 也是一個輕量級 CSS 框架，該框架最大的特點就是具有多個交互式組件，包括柵格、表單、選項卡、工具提示等等，可以幫助開發人員快速創建響應式網站和web應用程序。

官網：https://picnicss.com/

GitHub：https://github.com/franciscop...

GitHub Stars：3k

16. mini

從名字就可以看出，mini.css 也是極其輕量級的 CSS 框架，壓縮後不足 10 kB，擁有時下流行的響應式網格和現代化組件，可以再各種設備上獲得良好的效果。

官網：https://minicss.org/

GitHub：https://github.com/Chalarange...

GitHub Stars：2.8k

17. Paper Css

Paper CSS 是一個使用 LESS 構建的 CSS 框架，可以搭建出別具一格手寫風格的頁面。

官網：https://www.getpapercss.com/

GitHub：https://github.com/papercss/p...

Github Stars：2.7k

18. Base

又是一個輕量級單功能強大的響應式 CSS 框架，可以爲網站提供堅實的基礎。

官網：https://getbase.org/

GitHub：https://github.com/getbase/base

GitHub Stars：1.1k

19. Simple Grid

見名知意，Simple Grid是一個輕量級 CSS 網格框架，具備12列柵格設計樣式，可以幫助你快速構建響應式網站。

官網：http://simplegrid.io/

GitHub：https://github.com/zachacole/...

GitHub Stars：725

20. Tent Css

不依賴任何 JavaScript 的純 CSS 框架，具備搭建網站頁面的基礎結構，簡潔高效。

官網：https://css.sitetent.com/

GitHub：https://github.com/sitetent/t...

GitHub Stars：384

好了，以上就是本文的全部內容了，希望對你有所幫助。