當今時代眾多CSS的前端框架紛涌而至，但真正的優秀的卻屈指可數。

在這篇文章中我們將對我認為最好的五個框架進行比較，每個框架都有自己優缺點和特定的應用領域，這允許你根據特定項目的需求選擇合適的框架。比如，如果你的項目比較簡單，你就不需要復雜的框架，此外，許多選項是模塊化的，這允許你僅使用你需要的組件,或者混合使用不同框架的組件。

我們要討論的框架都是基于其在github上的人氣展示的，首先說最流行的，當然是：Bootstrap。

（注意：下面的一些信息在未來的幾周和幾月后就過時了，如：GitHub 上的評分(Stars)和版本數，因此如果你是在這篇文章發布很久以后閱讀的話，你需要留意這一點。此外，還要注意框架大小是否將必要的CSS和JS文件最小化。）

1. Bootstrap

Bootstrap 在當今流行的各種框架中是無可爭議的老大。鑒于其每天仍在增長的巨大人氣，可以肯定，這個美妙的工具絕對不會讓你失望，它也不會在你成功建立網站前就離你而去。

• 創建者: Mark Otto and Jacob Thornton.
• 發布: 2011
• 當前版本: 3.3.1
• 人氣: 在Github上有75,000+ stars
• 描述: “Bootstrap是最流行的的 HTML, CSS和 JavaScript 響應式開發框架 ，web上開發的第一個移動項目.”
• 核心概念/原則: RWD 和移動優先
• 框架大小: 145 KB
• 預處理器: Less 和 Sass
• 響應式: Yes
• 模塊化: Yes
• 開始模板/布局: Yes
• 圖標設置: Glyphicons Halflings set
• 附加/插件: 沒有捆綁插件,但許多第三方插件可用.
• 獨特的組件: Jumbotron
• 文檔: 良好
• 定制: 基本的GUI定制器。不幸的是,你需要手動輸入的顏色值,因為沒有可用的顏色選擇器。
• 瀏覽器支持： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
• 許可證: MIT

Notes on Bootstrap

•  Bootstrap 的主要優點是它非常流行。從技術上講，它并不一定比這次列出來的其他框架好，但它提供的資源(文章和教程、第三方插件和擴展、主題開發者等等)比其他四個框架的總和還要多。簡而言之，Bootstrap無處不在。這是人們繼續選擇它的主要原因。
• （注意：“獨特的組件”的意思是，相比這里提到的其他框架是獨一無二的。）

2. Foundation by ZURB

Foundation是這幾個框架中第二大的，在像ZURB一樣實力雄厚的公司支持下，這個框架確實很強大，是的，就是foundation。畢竟， Foundation已經在很多大型網站上投入使用，包括 Facebook, Mozilla, Ebay, Yahoo!和國家地理等等。

• 創建者: ZURB
• 發布: 2011
• 當前版本:5.4.7
• 人氣: 在Github上有18,000+ stars
• 描述: “世界上最優秀的響應式前端框架”
• 核心概念/原則: RWD 、手機優先、語義的
• 框架大小: 326KB
• 預處理器: Sass
• 響應式: Yes
• 模塊化: Yes
• 開始模板/布局: Yes
• 圖標設置: Foundation Icon Fonts
• 附加/插件: yes
• 獨特的組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• 文檔: 良好，還有許多額外的資源是可用的。
• 定制: 沒有GUI編輯器,只能手工定制。
• 瀏覽器支持： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• 許可證: MIT

Notes on Foundation

Foundation 是一個提供業務支持、培訓和咨詢真正專業的框架。它還提供了很多資源幫助你更快和更容易學習和使用框架。

3. Semantic UI

Semantic UI 經過多年的努力，致力于能夠以更語義化的方式構建網站。它使用自然語言的原則，使代碼更可讀，更容易理解。

• 創建者: Jack Lukic
• 發布:2013
• 當前版本:1.2.0
• 人氣: 在Github上有12,900+ stars
• 描述: “基于自然語言有效原則的UI組件框架”
• 核心概念/原則: 語義，標簽的矛盾性、響應式
• 框架大小: 552KB
• 預處理器: Less
• 響應式: Yes
• 模塊化: Yes
• 開始模板/布局: No
• 圖標設置: Font Awesome
• 附加/插件: yes
• 獨特的組件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• 文檔: 非常好。Semantic提供了一個很好的組織文檔,還有一個提供入門指南,定制和創建主題單獨的網站,。
• 定制: 沒有GUI定制器,只能手工定制。
• 瀏覽器支持：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
• 許可證: MIT

Notes on Semantic UI

Semantic 是這里討論的最創新和功能最全面的框架。在框架的總體結構和命名約定方面，也以清晰的邏輯和語義類超過了別的框架。

4. Pure by Yahoo!

Pure是一個輕量級的、模塊化的框架，以純CSS編寫，它包括很多組件，你可以根據需要聯合或獨立使用它們。

• 創建者:  Yahoo
• 發布: 2013
• 當前版本: 0.5.0
• 人氣: 在Github上有9,900+ stars
• 描述: “您可以在每一個web項目中使用的一組小的和響應式的CSS模塊”
• 核心概念/原則:SMACSS,極簡的.
• 框架大小: 18 KB
• 預處理器:  None
• 響應式: Yes
• 模塊化: Yes
• 開始模板/布局: Yes
• 圖標設置: 沒有，可以使用Font Awesome替代
• 附加/插件: None
• 獨特的組件:None
• 文檔: 良好
• 定制: 基本的GUI定制器。
• 瀏覽器支持：Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
• 許可證: MIT

Notes on Pure

Pure只提供一個基本的風格，使你的項目有一個干凈的開始。對于工作中不需要一個全功能的框架只需要有特定的組件的人來說是最理想的。

5. UIkit by YOOtheme

UIkit 是一個簡潔的框架，它易于使用，易于定制組件。雖然它不像其它競爭對手一樣受歡迎，但它提供了相同的功能和質量。

• 創建者:   YOOtheme
• 發布: 2013
• 當前版本: 2.13.1
• 人氣: 在Github上有3,800+ stars
• 描述: “一個輕量級的和模塊化的前端框架,用于快速開發和功能強大的web接口。”
• 核心概念/原則:RWD, 手機優先.
• 框架大小:  118 KB
• 預處理器:  Less, Sass
• 響應式: Yes
• 模塊化: Yes
• 開始模板/布局: Yes
• 圖標設置: Font Awesome
• 附加/插件: Yes
• 獨特的組件: Article, Flex, Cover, HTML Editor
• 文檔: 良好
• 定制: 優秀的GUI定制器。
• 瀏覽器支持： Chrome, Firefox, Safari, IE9+
• 許可證: MIT

Notes on UIkit

UIkit已經成功的在許多WordPress 主題上使用，它提供了一個靈活、強大的定制化機制，也可以通過GUI定制器進行手動操作。

哪一個框架更適合你？

最后，在選擇合適的框架方面，讓我給你一些意見，這里有一些重要的事情需要注意：

• 這個框架有足夠的人氣嗎？更大的普及意味著更多的人參與這個項目，因此，會有更多來自社區的教程和文章，更多真實的案例/網站，更多第三方擴展，與相關web開發產品更好地結合。巨大的人氣也意味著框架不太會過時，畢竟一個有著巨大群體使用的框架是不太可能被放棄的。
• 這個框架還在持續積極開發嗎?一個好的框架是需要結合最新的網絡技術不斷升級的，特別是關于移動方面的技術。
• 這個框架已經成熟了嗎？如果一個框架尚未在實際項目和測試中使用，那么你可以隨意玩，但依賴它做專業項目就不太明智了。
• 這個框架提供良好的文檔嗎？良好的文檔總是能為你的學習過程提供便利。
• 這個框架的特異性程度有多高？這里的要點是，相比一個特異程度高的框架，使用一個更通用的框架要容易得多。在大多數情況下,最好選擇一個最小風格的框架，因為它更容易定制。相比重寫或覆蓋現有的規則，添加新的CSS規則是更方便和高效的流程。另外,如果你在現有框架的頭部添加新規則，那么你將可能會留下一些不被使用的規則，這將增加不必要的CSS文件的大小。

最后,如果你仍然不確定，可以采用混搭方式。如果一個特定的框架不滿足您的需要，您可以從兩個或兩個以上的項目來混合組件。例如，你可以從一個框架得到較小的CSS樣式基礎從另一個框架得到一個優秀的柵格系統，再從第三個框架獲得更復雜的組件。模塊化萬歲!:)

你的想法是什么呢？這些框架有什么優點和缺點是這里沒有提到的呢？你認為還有其他問題是應該被列出來的嗎？在下面的討論中可以讓我們獲悉。