開發(fā)網(wǎng)站或web應(yīng)用時(shí)，網(wǎng)頁開發(fā)工程師往往都需要編寫CSS，如果每個(gè)項(xiàng)目都是從0開始，將會(huì)花費(fèi)大量的時(shí)間和精力，并且還會(huì)處理很多重復(fù)性工作。
漸漸地，工程師們意識(shí)到，可以拿出抽象的模塊來重復(fù)使用，以此來提升開發(fā)速度。于是乎，CSS框架便應(yīng)運(yùn)而生，并且得到了越來越多的工程師的青睞。
本文精選了15個(gè)2019年最佳CSS框架，如果你想要更快更簡單地開發(fā)網(wǎng)站或web程序，一定不要錯(cuò)過哦~
在正式開始之前，不妨先了解一下CSS框架。
簡單點(diǎn)講，CSS框架就是一個(gè)預(yù)先準(zhǔn)備好的網(wǎng)站基礎(chǔ)框架。幾乎每個(gè)CSS框架都具備一些基本結(jié)構(gòu)，比如，柵格設(shè)計(jì)、交互式UI設(shè)計(jì)模式、Web排版、工具提示、按鈕、圖標(biāo)，以及表單元素等等。這些預(yù)先準(zhǔn)備好的框架可以讓工程師們?cè)谝粋€(gè)相對(duì)成熟的模板上進(jìn)行定制和延伸，而不是從0開始開發(fā)。
最棒的一點(diǎn)是，盡管開發(fā)的項(xiàng)目不盡相同，但很多CSS框架依舊可以重復(fù)利用，這將在更大程度上節(jié)省時(shí)間。
誠然，CSS具備諸多優(yōu)點(diǎn)，但它也并非完美，很多工程師也會(huì)因此產(chǎn)生疑問：使用CSS框架真的有必要嗎？
在我來看，使用CSS框架確實(shí)非常高效，如果非要下一個(gè)定論，姑且可以用利遠(yuǎn)大于弊這個(gè)說法：
其一，CSS框架可以幫助工程師更快地開發(fā)網(wǎng)站
在開發(fā)網(wǎng)站或者web應(yīng)用時(shí)，時(shí)間節(jié)點(diǎn)非常關(guān)鍵，使用CSS框架可以極大地節(jié)約時(shí)間成本。并且CSS框架幾乎都具備高度自定義功能，不會(huì)對(duì)設(shè)計(jì)還原造成重大影響。
此外，對(duì)于初級(jí)前端開發(fā)，CSS框架的作用會(huì)更加明顯。使用一個(gè)現(xiàn)成的網(wǎng)站基礎(chǔ)框架和與之配套的工具與小部件，可以幫助開發(fā)比較順利地開發(fā)項(xiàng)目，即使他們的開發(fā)水平不夠優(yōu)秀也不會(huì)有很大影響。
其二，CSS框架可以快速構(gòu)建線框或原型項(xiàng)目
無論是網(wǎng)站設(shè)計(jì)還是產(chǎn)品設(shè)計(jì)，原型都至關(guān)重要。項(xiàng)目原型可以幫助團(tuán)隊(duì)快速驗(yàn)證和測試項(xiàng)目正確性。如果使用CSS框架，就可以更快地做出網(wǎng)站原型以盡早測試。
補(bǔ)充一點(diǎn)：對(duì)于產(chǎn)品經(jīng)理而言，也可以使用快速原型工具畫原型。
以下是我們精心挑選的15個(gè)CSS框架，每個(gè)框架的特色和利弊都有盡力說到，希望可以幫助你找到目前最符合你需要的一款。
Bootstrap是目前使用最廣泛的CSS框架，它是 Twitter 推出的一個(gè)用于前端開發(fā)的開源工具包，當(dāng)前最流行的版本是2018年發(fā)布的Bootstrap 4。相比Bootstrap 3，Bootstrap 4增加了很多特色和功能，例如新的配色方案，新的修改器以及新的實(shí)用程序分類等等。此外，Bootstrap 4是使用SASS構(gòu)建的，也就是說，Bootstrap現(xiàn)在同時(shí)適用于LESS和SASS了。
Bootstrap更多功能解析：
1）響應(yīng)式設(shè)計(jì)
Bootstrap的響應(yīng)式設(shè)計(jì)方案是基于其柵格設(shè)計(jì)系統(tǒng)，操作方便又簡單，開發(fā)人員可以快速創(chuàng)建一個(gè)基于Flexbox的網(wǎng)站布局，并且兼容所有瀏覽器。此外，Bootstrap也是第一個(gè)引入移動(dòng)優(yōu)先設(shè)計(jì)的CSS框架。
2）海量資源
Bootstrap有非常豐富的前端框架庫，里面有網(wǎng)站布局式樣，網(wǎng)站模板、Bootstrap主題模板、管理面板以及大量的UI組件，比如按鈕、表單、卡片、進(jìn)度條等等。這些預(yù)先構(gòu)建的組件都可以直接使用。
3）簡單易學(xué)
入門Bootstrap比較簡單，現(xiàn)在有很多設(shè)計(jì)師在學(xué)前端的時(shí)候，都會(huì)學(xué)習(xí)Bootstrap框架。
相比其他CSS框架，F(xiàn)oundation顯得相對(duì)專業(yè)，功能更加全面，因此也具備一定的學(xué)習(xí)難度。作為一個(gè)更高級(jí)，更復(fù)雜的框架，F(xiàn)oundation具有超強(qiáng)的可讀性、靈活性和可自定義性。這些特色也讓它成為創(chuàng)建響應(yīng)式網(wǎng)站和應(yīng)用程序的首選框架之一，很多大型網(wǎng)站，比如Facebook、Ebay、Mozilla、Disney，Adobe等都使用了該框架。
Foundation更多功能和特色解析：
1）強(qiáng)大的電子郵件框架
除了網(wǎng)站和web應(yīng)用程序之外，F(xiàn)oundation還可以創(chuàng)建外觀精美的響應(yīng)式HTML電子郵件，并且適配任何設(shè)備。
2）在線培訓(xùn)服務(wù)支持
Foundation的學(xué)習(xí)難度較大，因此Zurb（Foundation的開發(fā)團(tuán)隊(duì)）開設(shè)了在線培訓(xùn)課程和以及專業(yè)咨詢服務(wù)。
3）更易自定義
Foundation比Boostrap更加靈活，Bootstrap做出來的東西往往會(huì)非常相似，但Foundation可以做非常高度的自定義設(shè)計(jì)，只要專業(yè)技能足夠，前端開發(fā)人員可以完全掌控UI界面。
Pure是Yahoo在2014年創(chuàng)建的一個(gè)輕量的響應(yīng)式CSS框架。它基于Normalize.css構(gòu)建，開發(fā)人員可以使用其柵格設(shè)計(jì)和菜單創(chuàng)建高度響應(yīng)式的頁面布局。
和Bootstrap不同，Pure在默認(rèn)情況下是響應(yīng)式的，因此無法禁用響應(yīng)式選項(xiàng)。此外，如其名所示，Pure是一個(gè)純CSS框架，不包含任何JavaScript組件，體量也非常輕小，整個(gè)模塊壓縮后只有3.8KB。
Bulma是一個(gè)基于Flexbox布局模型的免費(fèi)開源項(xiàng)目。該CSS框架也是輕量級(jí)、響應(yīng)式的，并且具備移動(dòng)優(yōu)先的理念。對(duì)開發(fā)人員而言，Bulma和Bootstrap以及Foundation可以一起并列為三大最受歡迎的CSS框架，目前全球已經(jīng)有超過15萬名開發(fā)人員在使用Bulma。
Bulma之所以廣受歡迎的原因還有其高度可讀的命名規(guī)則，這對(duì)于新手開發(fā)人員來講，會(huì)大大降低學(xué)習(xí)成本。還有一個(gè)比較有意思的點(diǎn)，Bulma在Github上可以說是明星選手般的存在，人氣超高。
Semantic UI是一個(gè)用戶友好度爆表的響應(yīng)式前端框架，具備3000多個(gè)主題變量和50多個(gè)UI組件，可以快速搭建漂亮的網(wǎng)頁。Semantic UI還集成了許多第三方資源庫，包括React，Angular，Meteor，Ember等等，給開發(fā)人員帶來了更多便捷。
Semantic UI官方一直大力宣傳他們的最大亮點(diǎn)——“human-friendly HTML”，也就是說，開發(fā)人員可以使用通用語言來直觀展示分類和命名，因此幾乎沒有任何門檻就可以讀懂代碼。
此外，相比Boostrap的很多類似的UI界面或Foundation需要自定義操作的UI界面，Semantic UI 可以默認(rèn)創(chuàng)建更加美觀的界面和布局。
UI kit是一個(gè)輕量級(jí)的CSS和網(wǎng)頁UI設(shè)計(jì)框架，它最大的特色是功能全面性不輸其他CSS框架，但奉行極簡主義的它體量卻更輕巧，幾乎可以用麻雀雖小，五臟俱全來形容了。
UI kit具備超多的SVG圖標(biāo)、字體以及組件，加之其強(qiáng)大的響應(yīng)式設(shè)計(jì)，統(tǒng)一的UI樣式和靈活的自定義選項(xiàng)等功能，開發(fā)人員可以快速創(chuàng)建簡潔、模塊化的web界面。
此外，開發(fā)人員來可以在該框架中使用HTML創(chuàng)建更高級(jí)的flexbox布局。
Materialize CSS是Google在2014年開發(fā)的響應(yīng)式前端框架，它是基于Google的Material Design創(chuàng)建的，所以尤其適合網(wǎng)站或Android平臺(tái)的項(xiàng)目使用。
目前來看，兩類人使用該框架最多，一種是熱愛Google Material Design的開發(fā)人員和設(shè)計(jì)師，所謂愛屋及烏，加之Materialise CSS本身確實(shí)也比較優(yōu)秀，因此很多Material Design愛好者自然而然就用它了。
第二種是熟悉Boostrap的開發(fā)人員，因?yàn)镸aterialize CSS也是使用了Bootstrap的12列柵格設(shè)計(jì)模式，因此使用起Materialize CSS來也會(huì)比較熟悉，可以快速創(chuàng)建響應(yīng)式頁面布局。
如果你是其中之一，不妨試試Materialise CSS。
Milligram可以說是最輕小的CSS框架之一，壓縮后到最小時(shí)僅2KB，因此只能提供最小的樣式設(shè)置。Milligram雖然非常輕小，但功能依舊不差，它具有一整套web開發(fā)工具，并且充分利用了CSS3規(guī)范中的各種原理來幫助開發(fā)人員快速開發(fā)。
Skeleton是一個(gè)響應(yīng)非?？焖俚腃SS框架。和Milligram一樣，它的體量也非常輕小，僅包含400行源代碼，但它具有的柵格設(shè)計(jì)、版式、按鈕、表單、列表、表格等功能，依舊可以幫助開發(fā)人員快速創(chuàng)建項(xiàng)目。
如果你正在進(jìn)行某個(gè)比較輕量級(jí)的項(xiàng)目，或者不需要一些大型框架的諸多實(shí)用程序時(shí)，使用Skeleton或許是一個(gè)不錯(cuò)的選擇。
Tailwind CSS是一個(gè)高度可定制的CSS框架，在這一點(diǎn)上，Tailwind CSS幾乎完勝了其他所有的CSS框架。
那么，Tailwind是如何做到的呢？
首先，Tailwind框架是使用PostCSS編寫的，并且使用了JavaScript進(jìn)行配置。這樣，開發(fā)人員可以完全自主掌握網(wǎng)頁UI風(fēng)格，包括顏色、邊框大小、字重，間距、陰影等等。
舉個(gè)例子，用Tailwind創(chuàng)建按鈕，它們的外觀如下：
其次，Tailwind沒有大量預(yù)先設(shè)置好樣式的UI組件，而是專注于實(shí)用程序，因此開發(fā)人員可以更加自主的創(chuàng)建界面UI。但學(xué)習(xí)實(shí)用程序并不容易，如果你對(duì)Atomic CSS也一無所知，學(xué)習(xí)難度就更高了。
Spectre.css是一個(gè)輕量級(jí)，響應(yīng)式和現(xiàn)代化的CSS框架，它基于Flexbox布局創(chuàng)建，具備比較優(yōu)雅的設(shè)計(jì)外觀、版式以及組件。并且Spectre的所有組件也是完全使用CSS創(chuàng)建的，因此不需要使用任何JavaScript語言就可以使用。
Base是一個(gè)響應(yīng)式CSS框架，它也是非常輕量級(jí)的，但功能依舊強(qiáng)大，具備多個(gè)獨(dú)立的模板，方便選取和使用。此外，它也具備移動(dòng)優(yōu)先設(shè)計(jì)理念，并且兼容主流瀏覽器，包括IE 10+。
Picnic也是一個(gè)輕量級(jí)CSS框架，壓縮后的大小不到10kb。該框架最大的特點(diǎn)就是具有多個(gè)交互式組件，包括柵格、表單、選項(xiàng)卡、工具提示等等，可以幫助開發(fā)人員快速創(chuàng)建響應(yīng)式網(wǎng)站和web應(yīng)用程序。
Mustard UI可以說是一款入門級(jí)別的CSS框架。如果你是第一次了解CSS框架，可以從它的模塊開始學(xué)習(xí)，零門檻，幾乎是即學(xué)即用。它的功能有限，但僅作為入門跳板倒也是非常不錯(cuò)的。
Dead Simple Grid是一個(gè)非常有用的工具，體量也不大，是一個(gè)開源項(xiàng)目，僅包含250個(gè)字節(jié)的CSS代碼和2個(gè)分類。
嚴(yán)格意義上甚至可以不把它看做一個(gè)完整的CSS框架，但它可以為前端開發(fā)工程提供非常好用非常強(qiáng)大的柵格系統(tǒng)，這也是必須要推薦它的原因。
Susy是一個(gè)基于Sass的輕量級(jí)柵格布局框架，可以幫助開發(fā)人員簡化響應(yīng)式柵格布局開發(fā)流程。使用Susy時(shí)，開發(fā)人員還可以使用float，flexbox，table等其他CSS技術(shù)。
Animate.css可以幫助開發(fā)人員快速添加CSS動(dòng)畫，包括過渡、變換、彈跳、滾動(dòng)等等。
Paper CSS是一個(gè)使用LESS構(gòu)建的CSS框架。
NES.css是一個(gè)具有NES樣式的CSS框架，它只提供組件，沒有布局。
Tent CSS是一個(gè)簡單的CSS框架，具備構(gòu)建網(wǎng)站的基礎(chǔ)結(jié)構(gòu)。
Simple Grid是一個(gè)輕量級(jí)CSS網(wǎng)格，具備12列柵格設(shè)計(jì)樣式，可以快速構(gòu)建響應(yīng)式網(wǎng)站。
當(dāng)然咯。Bootstrap是本文第一個(gè)介紹的CSS框架，也是目前最常用的CSS框架。如果你對(duì)Boostrap感興趣，建議你使用最新的Bootstrap 4。
兩者其實(shí)本質(zhì)不太一樣，CSS是一種計(jì)算機(jī)語言，而Bootstrap是一種前端開發(fā)框架，并且Bootstrap是基于HTM, CSS和JavaScript創(chuàng)建的。他們兩者在使用中各自都有優(yōu)缺點(diǎn)，這兩者也都是開發(fā)工程師都要掌握的。
Flexbox不是框架。Flexbox（Flexible Box Layout Module）是CSS3中添加的一個(gè)新功能，本質(zhì)上是一種布局模式，可以幫助開發(fā)工程師快速創(chuàng)建網(wǎng)頁布局。
HTML不是框架。HTML（Hypertext Marked Language）中文為超文本標(biāo)記語言，是一種標(biāo)記語言。開發(fā)工程師可以把界面信息按某種規(guī)則寫成HTML文件，并且讓瀏覽器識(shí)別，成為我們看到的網(wǎng)頁。
關(guān)于CSS框架就暫時(shí)介紹到這里，如果你有其他好的CSS框架開源項(xiàng)目，歡迎分享哦~
聯(lián)系客服
