當(dāng)今時(shí)代眾多CSS的前端框架紛涌而至，但真正的優(yōu)秀的卻屈指可數(shù)。
在這篇文章中我們將對(duì)我認(rèn)為最好的五個(gè)框架進(jìn)行比較，每個(gè)框架都有自己優(yōu)缺點(diǎn)和特定的應(yīng)用領(lǐng)域，這允許你根據(jù)特定項(xiàng)目的需求選擇合適的框架。比如，如果你的項(xiàng)目比較簡(jiǎn)單，你就不需要復(fù)雜的框架，此外，許多選項(xiàng)是模塊化的，這允許你僅使用你需要的組件,或者混合使用不同框架的組件。
我們要討論的框架都是基于其在github上的人氣展示的，首先說(shuō)最流行的，當(dāng)然是：Bootstrap。
（注意：下面的一些信息在未來(lái)的幾周和幾月后就過(guò)時(shí)了，如：GitHub 上的評(píng)分(Stars)和版本數(shù)，因此如果你是在這篇文章發(fā)布很久以后閱讀的話，你需要留意這一點(diǎn)。此外，還要注意框架大小是否將必要的CSS和JS文件最小化。）
1. Bootstrap
Bootstrap 在當(dāng)今流行的各種框架中是無(wú)可爭(zhēng)議的老大。鑒于其每天仍在增長(zhǎng)的巨大人氣，可以肯定，這個(gè)美妙的工具絕對(duì)不會(huì)讓你失望，它也不會(huì)在你成功建立網(wǎng)站前就離你而去。
- 創(chuàng)建者: Mark Otto and Jacob Thornton.
- 發(fā)布: 2011
- 當(dāng)前版本: 3.3.1
- 人氣: 在Github上有75,000+ stars
- 描述: “Bootstrap是最流行的的 HTML, CSS和 JavaScript 響應(yīng)式開(kāi)發(fā)框架 ，web上開(kāi)發(fā)的第一個(gè)移動(dòng)項(xiàng)目.”
- 核心概念/原則: RWD 和移動(dòng)優(yōu)先
- 框架大小: 145 KB
- 預(yù)處理器: Less 和 Sass
- 響應(yīng)式: Yes
- 模塊化: Yes
- 開(kāi)始模板/布局: Yes
- 圖標(biāo)設(shè)置: Glyphicons Halflings set
- 附加/插件: 沒(méi)有捆綁插件,但許多第三方插件可用.
- 獨(dú)特的組件: Jumbotron
- 文檔: 良好
- 定制: 基本的GUI定制器。不幸的是,你需要手動(dòng)輸入的顏色值,因?yàn)闆](méi)有可用的顏色選擇器。
- 瀏覽器支持： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
- 許可證: MIT
Notes on Bootstrap
- Bootstrap 的主要優(yōu)點(diǎn)是它非常流行。從技術(shù)上講，它并不一定比這次列出來(lái)的其他框架好，但它提供的資源(文章和教程、第三方插件和擴(kuò)展、主題開(kāi)發(fā)者等等)比其他四個(gè)框架的總和還要多。簡(jiǎn)而言之，Bootstrap無(wú)處不在。這是人們繼續(xù)選擇它的主要原因。
- （注意：“獨(dú)特的組件”的意思是，相比這里提到的其他框架是獨(dú)一無(wú)二的。）
2. Foundation by ZURB
Foundation是這幾個(gè)框架中第二大的，在像ZURB一樣實(shí)力雄厚的公司支持下，這個(gè)框架確實(shí)很強(qiáng)大，是的，就是foundation。畢竟， Foundation已經(jīng)在很多大型網(wǎng)站上投入使用，包括 Facebook, Mozilla, Ebay, Yahoo!和國(guó)家地理等等。
- 創(chuàng)建者: ZURB
- 發(fā)布: 2011
- 當(dāng)前版本:5.4.7
- 人氣: 在Github上有18,000+ stars
- 描述: “世界上最優(yōu)秀的響應(yīng)式前端框架”
- 核心概念/原則: RWD 、手機(jī)優(yōu)先、語(yǔ)義的
- 框架大小: 326KB
- 預(yù)處理器: Sass
- 響應(yīng)式: Yes
- 模塊化: Yes
- 開(kāi)始模板/布局: Yes
- 圖標(biāo)設(shè)置: Foundation Icon Fonts
- 附加/插件: yes
- 獨(dú)特的組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
- 文檔: 良好，還有許多額外的資源是可用的。
- 定制: 沒(méi)有GUI編輯器,只能手工定制。
- 瀏覽器支持： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
- 許可證: MIT
Notes on Foundation
Foundation 是一個(gè)提供業(yè)務(wù)支持、培訓(xùn)和咨詢真正專業(yè)的框架。它還提供了很多資源幫助你更快和更容易學(xué)習(xí)和使用框架。
3. Semantic UI
Semantic UI 經(jīng)過(guò)多年的努力，致力于能夠以更語(yǔ)義化的方式構(gòu)建網(wǎng)站。它使用自然語(yǔ)言的原則，使代碼更可讀，更容易理解。
- 創(chuàng)建者: Jack Lukic
- 發(fā)布:2013
- 當(dāng)前版本:1.2.0
- 人氣: 在Github上有12,900+ stars
- 描述: “基于自然語(yǔ)言有效原則的UI組件框架”
- 核心概念/原則: 語(yǔ)義，標(biāo)簽的矛盾性、響應(yīng)式
- 框架大小: 552KB
- 預(yù)處理器: Less
- 響應(yīng)式: Yes
- 模塊化: Yes
- 開(kāi)始模板/布局: No
- 圖標(biāo)設(shè)置: Font Awesome
- 附加/插件: yes
- 獨(dú)特的組件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
- 文檔: 非常好。Semantic提供了一個(gè)很好的組織文檔,還有一個(gè)提供入門指南,定制和創(chuàng)建主題單獨(dú)的網(wǎng)站,。
- 定制: 沒(méi)有GUI定制器,只能手工定制。
- 瀏覽器支持：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
- 許可證: MIT
Notes on Semantic UI
Semantic 是這里討論的最創(chuàng)新和功能最全面的框架。在框架的總體結(jié)構(gòu)和命名約定方面，也以清晰的邏輯和語(yǔ)義類超過(guò)了別的框架。
4. Pure by Yahoo!
Pure是一個(gè)輕量級(jí)的、模塊化的框架，以純CSS編寫，它包括很多組件，你可以根據(jù)需要聯(lián)合或獨(dú)立使用它們。
- 創(chuàng)建者: Yahoo
- 發(fā)布: 2013
- 當(dāng)前版本: 0.5.0
- 人氣: 在Github上有9,900+ stars
- 描述: “您可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊”
- 核心概念/原則:SMACSS,極簡(jiǎn)的.
- 框架大小: 18 KB
- 預(yù)處理器: None
- 響應(yīng)式: Yes
- 模塊化: Yes
- 開(kāi)始模板/布局: Yes
- 圖標(biāo)設(shè)置: 沒(méi)有，可以使用Font Awesome替代
- 附加/插件: None
- 獨(dú)特的組件:None
- 文檔: 良好
- 定制: 基本的GUI定制器。
- 瀏覽器支持：Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
- 許可證: MIT
Notes on Pure
Pure只提供一個(gè)基本的風(fēng)格，使你的項(xiàng)目有一個(gè)干凈的開(kāi)始。對(duì)于工作中不需要一個(gè)全功能的框架只需要有特定的組件的人來(lái)說(shuō)是最理想的。
5. UIkit by YOOtheme
UIkit 是一個(gè)簡(jiǎn)潔的框架，它易于使用，易于定制組件。雖然它不像其它競(jìng)爭(zhēng)對(duì)手一樣受歡迎，但它提供了相同的功能和質(zhì)量。
- 創(chuàng)建者: YOOtheme
- 發(fā)布: 2013
- 當(dāng)前版本: 2.13.1
- 人氣: 在Github上有3,800+ stars
- 描述: “一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開(kāi)發(fā)和功能強(qiáng)大的web接口。”
- 核心概念/原則:RWD, 手機(jī)優(yōu)先.
- 框架大小: 118 KB
- 預(yù)處理器: Less, Sass
- 響應(yīng)式: Yes
- 模塊化: Yes
- 開(kāi)始模板/布局: Yes
- 圖標(biāo)設(shè)置: Font Awesome
- 附加/插件: Yes
- 獨(dú)特的組件: Article, Flex, Cover, HTML Editor
- 文檔: 良好
- 定制: 優(yōu)秀的GUI定制器。
- 瀏覽器支持： Chrome, Firefox, Safari, IE9+
- 許可證: MIT
Notes on UIkit
UIkit已經(jīng)成功的在許多WordPress 主題上使用，它提供了一個(gè)靈活、強(qiáng)大的定制化機(jī)制，也可以通過(guò)GUI定制器進(jìn)行手動(dòng)操作。
哪一個(gè)框架更適合你？
最后，在選擇合適的框架方面，讓我給你一些意見(jiàn)，這里有一些重要的事情需要注意：
- 這個(gè)框架有足夠的人氣嗎？更大的普及意味著更多的人參與這個(gè)項(xiàng)目，因此，會(huì)有更多來(lái)自社區(qū)的教程和文章，更多真實(shí)的案例/網(wǎng)站，更多第三方擴(kuò)展，與相關(guān)web開(kāi)發(fā)產(chǎn)品更好地結(jié)合。巨大的人氣也意味著框架不太會(huì)過(guò)時(shí)，畢竟一個(gè)有著巨大群體使用的框架是不太可能被放棄的。
- 這個(gè)框架還在持續(xù)積極開(kāi)發(fā)嗎?一個(gè)好的框架是需要結(jié)合最新的網(wǎng)絡(luò)技術(shù)不斷升級(jí)的，特別是關(guān)于移動(dòng)方面的技術(shù)。
- 這個(gè)框架已經(jīng)成熟了嗎？如果一個(gè)框架尚未在實(shí)際項(xiàng)目和測(cè)試中使用，那么你可以隨意玩，但依賴它做專業(yè)項(xiàng)目就不太明智了。
- 這個(gè)框架提供良好的文檔嗎？良好的文檔總是能為你的學(xué)習(xí)過(guò)程提供便利。
- 這個(gè)框架的特異性程度有多高？這里的要點(diǎn)是，相比一個(gè)特異程度高的框架，使用一個(gè)更通用的框架要容易得多。在大多數(shù)情況下,最好選擇一個(gè)最小風(fēng)格的框架，因?yàn)樗菀锥ㄖ�。相比重寫或覆蓋現(xiàn)有的規(guī)則，添加新的CSS規(guī)則是更方便和高效的流程。另外,如果你在現(xiàn)有框架的頭部添加新規(guī)則，那么你將可能會(huì)留下一些不被使用的規(guī)則，這將增加不必要的CSS文件的大小。
最后,如果你仍然不確定，可以采用混搭方式。如果一個(gè)特定的框架不滿足您的需要，您可以從兩個(gè)或兩個(gè)以上的項(xiàng)目來(lái)混合組件。例如，你可以從一個(gè)框架得到較小的CSS樣式基礎(chǔ)從另一個(gè)框架得到一個(gè)優(yōu)秀的柵格系統(tǒng)，再?gòu)牡谌齻�(gè)框架獲得更復(fù)雜的組件。模塊化萬(wàn)歲!:)
你的想法是什么呢？這些框架有什么優(yōu)點(diǎn)和缺點(diǎn)是這里沒(méi)有提到的呢？你認(rèn)為還有其他問(wèn)題是應(yīng)該被列出來(lái)的嗎？在下面的討論中可以讓我們獲悉。