前言

轉(zhuǎn)眼間 2020 年已經(jīng)過去了一個(gè)月，在祈禱疫情盡快消散的同時(shí)，不要忘了學(xué)習(xí)。本文為大家搜羅了 20 款截至目前最受程序員歡迎的前端CSS框架，其中有的霸榜已久，也有不少后起之秀，有的是單純的 CSS 框架，也有的結(jié)合了 JavaScript 以提供更豐富的功能。一起來看看有沒有你的菜，以下按照 GitHub Star 數(shù)量進(jìn)行排序。

1. Bootstrap

Bootstrap 無疑是目前使用最廣泛的 CSS 框架，GitHub 上近 14 萬的 Star 數(shù)就足以說明問題。優(yōu)點(diǎn)有很多，比如響應(yīng)式設(shè)計(jì)，海量資源且簡單易學(xué)。不過也有人吐槽 Bootstrap 稍顯臃腫，而且在使用人數(shù)太多且不定制化的情況下，容易導(dǎo)致很多網(wǎng)站外觀千篇一律。

官網(wǎng)：https://github.com/twbs/bootstrap

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

GitHub Stars：138k

2. Animate.css

提供了極其豐富的動(dòng)畫效果，就像它的名字一樣，可以為你的網(wǎng)站增添不少活力。

官網(wǎng)：https://daneden.github.io/animate.css/

GitHub：https://github.com/daneden/animate.css

GitHub Stars：64.6k

3. Semantic UI

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

官網(wǎng)：https://semantic-ui.com/

GitHub：https://github.com/Semantic-Org/Semantic-UI

GitHub Stars：47.3k

4. Bulma

相比Bootstrap，Bulma 絕對(duì)算是后起之秀了，而且其上升勢頭相當(dāng)迅猛，這是一個(gè)基于 Flexbox 布局模型的純粹的 CSS 開源框架，Bulma的主要特征有100%響應(yīng)式設(shè)計(jì)、模塊化、現(xiàn)代化，對(duì)其他老牌框架審美疲勞的小伙伴可以試試。

官網(wǎng)：https://bulma.io/

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

GitHub Stars：38.4k

5. Materialize

谷歌開源的前端框架，基于谷歌的 Material Design 風(fēng)格，很適合網(wǎng)站和安卓平臺(tái)。

官網(wǎng)：https://materializecss.com/

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

GitHub Stars：37.1k

6. Foundation

相比其他前端框架，Foundation 除了擁有豐富的 web 應(yīng)用框架之外，還有專業(yè)的電子郵件框架，而且具備超強(qiáng)的可讀性、靈活性和可定制化的特點(diǎn)，使得它成為惠普、亞馬遜等諸多大企業(yè)的選擇，不過學(xué)習(xí)難度略高。

官網(wǎng)：https://foundation.zurb.com/

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

GitHub Stars：28.5k

7. Pure.css

雅虎開源的輕量級(jí)純 CSS框架，基于Normalize.css構(gòu)建，對(duì)各種瀏覽器的兼容性很好，開發(fā)人員可以使用其柵格設(shè)計(jì)和菜單創(chuàng)建高度響應(yīng)式的頁面布局。

官網(wǎng)：https://purecss.io/

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

GitHub Stars：20.5k

8. Tailwind

相比其他的 CSS 框架，Tailwind 在可定制這一點(diǎn)上可以說是完勝，這對(duì)于喜歡自己動(dòng)手的小伙伴來說極具吸引力。

官網(wǎng)：https://tailwindcss.com/

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

GitHub Stars：19.1k

9. Skeleton

響應(yīng)迅速的輕量級(jí) CSS 框架，適合用于小項(xiàng)目。

官網(wǎng)：http://getskeleton.com/

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

GitHub Stars：17.3k

10. UIkit

輕量級(jí)且功能豐富，響應(yīng)式設(shè)計(jì)，其統(tǒng)一的 UI 樣式和靈活的自定義選項(xiàng)可以幫助開發(fā)人員快速搭建美觀、簡潔且模塊化的網(wǎng)站頁面。

官網(wǎng)：https://getuikit.com/

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

GitHub Stars：15.4k

11. NES.css

與眾不同的像素風(fēng)格有沒有吸引到你？

官網(wǎng)：https://nostalgic-css.github.io/NES.css/#

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

GitHub Stars：14.2k

12. Spectre

正如其官網(wǎng)介紹的那樣，Spectre.css 是一個(gè)輕量級(jí)、響應(yīng)式和現(xiàn)代化的 CSS 框架，同樣是基于 Flexbox 布局創(chuàng)建。

官網(wǎng)：https://picturepan2.github.io/spectre/

GitHub：https://github.com/picturepan2/spectre

GitHub Stars：9.9k

13. Miligram

號(hào)稱最輕量級(jí)的 CSS 框架，但是麻雀雖小，五臟俱全，擁有完整的 web 開發(fā)工具。

官網(wǎng)：https://milligram.io/

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

GitHub Stars：8.5k

14. Susy

基于 Sass 的輕量級(jí)柵格布局框架，可以幫助開發(fā)人員簡化響應(yīng)式柵格布局的開發(fā)流程。

官網(wǎng)：https://www.oddbird.net/susy/

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

GitHub Stars：3.9k

15. Picnic

Picnic也是一個(gè)輕量級(jí) CSS 框架，該框架最大的特點(diǎn)就是具有多個(gè)交互式組件，包括柵格、表單、選項(xiàng)卡、工具提示等等，可以幫助開發(fā)人員快速創(chuàng)建響應(yīng)式網(wǎng)站和web應(yīng)用程序。

官網(wǎng)：https://picnicss.com/

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

GitHub Stars：3k

16. mini

從名字就可以看出，mini.css 也是極其輕量級(jí)的 CSS 框架，壓縮后不足 10 kB，擁有時(shí)下流行的響應(yīng)式網(wǎng)格和現(xiàn)代化組件，可以再各種設(shè)備上獲得良好的效果。

官網(wǎng)：https://minicss.org/

GitHub：https://github.com/Chalarangelo/mini.css

GitHub Stars：2.8k

17. Paper Css

Paper CSS 是一個(gè)使用 LESS 構(gòu)建的 CSS 框架，可以搭建出別具一格手寫風(fēng)格的頁面。

官網(wǎng)：https://www.getpapercss.com/

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

Github Stars：2.7k

18. Base

又是一個(gè)輕量級(jí)單功能強(qiáng)大的響應(yīng)式 CSS 框架，可以為網(wǎng)站提供堅(jiān)實(shí)的基礎(chǔ)。

官網(wǎng)：https://getbase.org/

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

GitHub Stars：1.1k

19. Simple Grid

見名知意，Simple Grid是一個(gè)輕量級(jí) CSS 網(wǎng)格框架，具備12列柵格設(shè)計(jì)樣式，可以幫助你快速構(gòu)建響應(yīng)式網(wǎng)站。

官網(wǎng)：http://simplegrid.io/

GitHub：https://github.com/zachacole/Simple-Grid

GitHub Stars：725

20. Tent Css

不依賴任何 JavaScript 的純 CSS 框架，具備搭建網(wǎng)站頁面的基礎(chǔ)結(jié)構(gòu)，簡潔高效。

官網(wǎng)：https://css.sitetent.com/

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

GitHub Stars：384

好了，以上就是本文的全部內(nèi)容了，希望對(duì)你有所幫助。

總結(jié)

以上是生活随笔為你收集整理的2020 年最受程序员欢迎的 20 个 CSS 框架，有没有你的菜？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。