眾所周知前端開發(fā)是一個綜合性比較強的編程工作迟几，前端開發(fā)人員不僅需要一定的審美觀和設計觀，同時還需要精通諸如HTML栏笆、CSS类腮、JavaScript等錯綜復雜的技術。因此蛉加，在前端開發(fā)工作中存哲，借用一些開發(fā)框架往往能達到事半功倍的效果。
今天的文章小渡為大家搜羅了數十款目前最受程序員歡迎的前端CSS框架七婴，其中有的霸榜已久祟偷，也有不少后起之秀，有的是單純的CSS框架打厘，也有的結合了JavaScript以提供更豐富的功能修肠。一起來看看有沒有你的菜吧！
01Bootstrap
Bootstrap無疑是目前使用最廣泛的CSS框架户盯，GitHub上近14萬的Star數就足以說明問題嵌施。
Bootstrap是一款由Twitter推出的開源CSS框架，它的核心是由一系列用于Web前端開發(fā)的工具包組成莽鸭。Bootstrap基于HTML吗伤、CSS和JavaScript，是一款非常適合敏捷Web開發(fā)的CSS框架硫眨。
它的優(yōu)點有很多足淆，比如響應式設計，可以智能識別客戶端瀏覽器的類型礁阁，從而構造適應當前設備前端布局巧号，這一切都是全自動的。還比如擁有海量資源且簡單易學姥闭。無論你是高級的前端設計師丹鸿，還是普通的程序員，都能夠很快地掌握Bootstrap的開發(fā)流程和開發(fā)方式棚品。
不過也有人吐槽Bootstrap稍顯臃腫靠欢，而且在使用人數太多且不定制化的情況下，容易導致很多網站外觀千篇一律铜跑。
02SemanticUI
SemanticUI是一款語義化的前端開發(fā)框架门怪，Semantic是圍繞自然交流語言而架構的，這使得開發(fā)更加直觀（易于理解）疼进。跟Bootstrap不同薪缆，Semantic在功能特性上、布局設計上、用戶體驗上更貼近自然語言拣帽。
SemanticUI文檔和演示非常完善疼电，易于學習和使用。同時配備網格布局减拭，支持Sass和LESS動態(tài)樣式語言蔽豺，還有有一些非常實用的附加配置，例如inverted類拧粪⌒薅福總的來說對于社區(qū)貢獻來說是比較開放的。
03Bulma
相比Bootstrap可霎，Bulma絕對算是后起之秀了魄鸦，而且其上升勢頭相當迅猛，這是一個基于Flexbox布局模型的純粹的CSS開源框架癣朗，Bulma的主要特征有100%響應式設計拾因、模塊化、現代化旷余，對其他老牌框架審美疲勞的小伙伴可以試試绢记。
04Flat UI
FlatUI是一款基于Bootstrap的扁平化前端UI工具包，FlatUI的組件外觀設計非常清新和漂亮正卧，FlatUI的組件包含按鈕蠢熄，輸入框，組合按鈕炉旷，復選框签孔，單選按鈕，標簽砾跃，菜單骏啰，進度條和滑塊等精美的元素。FlatUI包含了很多基本的用戶界面抽高，同時也可以靈活創(chuàng)建更多自定義的UI界面組件。
05BootMetro
和FlatUI一樣透绩，BootMetro同樣也是一款基于Bootstrap的CSS框架翘骂，BootMetro的最大特點在于它是一款Win8 Metro風格的CSS框架。Metro風格的優(yōu)勢在于界面簡潔平滑帚豪，UI元素簡單碳竟，加載速度快，并且有不錯的視覺效果狸臣。
基于強大的TwitterBootstrap莹桅，Metro框架的靈感源于MetroUICSS，因為Metro風格可以更加突出網頁的主要內容烛亦，因此可以讓用戶更專注于網站的內容诈泼。同時它完全免費懂拾，和Bootstrap一樣，BootMetro的使用也是非常簡單铐达。
06Foundation
相比其他前端框架岖赋，Foundation除了擁有豐富的web應用框架之外，還有專業(yè)的電子郵件框架瓮孙，而且具備超強的可讀性唐断、靈活性和可定制化的特點，使得它成為惠普杭抠、亞馬遜等諸多大企業(yè)的選擇脸甘，不過學習難度略高。
07Pure.css
Pure也是一款很出色的CSS框架偏灿，之前分享的Bootstrap是由Twitter出品的斤程，而Pure是來自雅虎的。盡管從UI界面效果上來說菩混，Pure沒有Bootstrap那樣精美忿墅，但Pure是純CSS實現的，因此非常小巧沮峡，整個框架壓縮后只有5.7k左右疚脐。
Pure最大的特點就是框架基于純CSS，無任何JavaScript代碼邢疙，渲染速度比較快棍弄。由Yahoo出品，技術上應該不存在太大問題疟游。它的組件也很豐富呼畸，包括表格、表單颁虐、按鈕蛮原、表、導航等另绩。CSS類的標識十分簡單儒陨，因此在使用Pure的過程中代碼會比較友好。
08UIkit
UIkit是YOOtheme團隊開發(fā)的一款輕量級笋籽、模塊化的前端框架蹦漠，可快速構建強大的前端web界面。
UIKit使用的變量基于LESS车海，具有體積小笛园、模塊化、可輕松地自定義主題及響應式設計可在多種環(huán)境中使用等特點。UIkit中文網為廣大國內開發(fā)者提供詳盡的中文文檔研铆、代碼實例等埋同，幫助開發(fā)者快速掌握并使用這一框架。
09Miligram
號稱最輕量級的CSS框架蚜印，但是麻雀雖小莺禁，五臟俱全，擁有完整的web開發(fā)工具窄赋。
10Picnic
Picnic也是一個輕量級CSS框架哟冬，該框架最大的特點就是具有多個交互式組件，包括柵格忆绰、表單浩峡、選項卡、工具提示等等错敢，可以幫助開發(fā)人員快速創(chuàng)建響應式網站和web應用程序翰灾。
正如PicnicCSS的宣傳是輕量級和美觀的前端框架，它的顏色感覺像一個簡單版本的Bootstrap稚茅，使用平面設計語言纸淮，符合廣泛的審美。示例頁面有全部Picnic默認元素樣式的完整列表亚享。還有一個超級干凈的文檔頁面咽块，提供有關PicnicCSS入門的說明。
11Base
又是一個輕量級但功能強大的響應式CSS框架欺税，可以為網站提供堅實的基礎侈沪。Base的設計目標在于同各類新型與早期瀏覽器相兼容，并能夠順暢運行在各類移動設備之上晚凿，而這種能力也使其成為一套強大的跨平臺及響應式前端HTML5框架亭罪。
另外，Base框架還在其官方網站上提供一系列免費的單頁面網站設計模板供大家使用歼秽。
12SimpleGrid
見名知意应役，SimpleGrid是一個輕量級CSS網格框架，具備12列柵格設計樣式哲银，可以幫助你快速構建適應于手機和平板電腦的網站扛吞。它不是一個包含從表單到按鈕所有東西的CSS框架，它僅僅是一個非常輕量級的CSS網格系統(tǒng)荆责。
以上就是近期GitHub上最受程序員歡迎的幾個前端CSS框架，大家在工作中可以根據需求的難易進行框架選擇亚脆，如果業(yè)務比較重做院，最好根據Bootstrap進行二次開發(fā)；反之，可以選擇一些輕量級框架键耕，當然最重要還是根據自己的需求造輪子寺滚。
使用框架或者研究框架的意義還有很多，比如高效率屈雄、面向對象思想的具體實現等等村视，不要畏懼新知識、害怕難以駕馭酒奶、或是遇到問題的時候無法解決蚁孔。只有不斷接收學習新知識，才能讓我們對于前端開發(fā)的認知不停留于表面惋嚎。
如今輕量級框架如雨后春筍杠氢，層出不窮。每個人都應該歸納總結工作中的常見需求另伍，編寫一套適合自己的CSS框架鼻百。
