當今時代衆多css的前端架構紛湧而至，但真正的優秀的卻屈指可數。
在這篇文章中我們将對我認為最好的五個架構進行比較，每個架構都有自己優缺點和特定的應用領域，這允許你根據特定項目的需求選擇合适的架構。比如， 如果你的項目比較簡單，你就不需要複雜的架構，此外，許多選項是子產品化的，這允許你僅使用你需要的元件,或者混合使用不同架構的元件。
我們要讨論的架構都是基于其在github上的人氣展示的，首先說最流行的，當然是：bootstrap。
（注意：下面的一些資訊在未來的幾周和幾月後就過時了，如：github 上的評分(stars)和版本數，是以如果你是在這篇文章釋出很久以後閱讀的話，你需要留意這一點。此外，還要注意架構大小是否将必要的css和js檔案最小化。）
<a target="_blank"></a>
釋出: 2011
目前版本: 3.3.1
人氣: 在github上有75,000+ stars
描述: “bootstrap是最流行的的 html, css和 javascript 響應式開發架構 ，web上開發的第一個移動項目.”
架構大小: 145 kb
響應式: yes
子產品化: yes
開始模闆/布局: yes
附加/插件: 沒有捆綁插件,但許多第三方插件可用.
獨特的元件: jumbotron
文檔: 良好
定制: 基本的gui定制器。不幸的是,你需要手動輸入的顔色值,因為沒有可用的顔色選擇器。
bootstrap 的主要優點是它非常流行。從技術上講，它并不一定比這次列出來的其他架構好，但它提供的資源(文章和教程、第三方插件和擴充、主題開發者等等)比其他四個架構的總和還要多。簡而言之，bootstrap無處不在。這是人們繼續選擇它的主要原因。
（注意：“獨特的元件”的意思是，相比這裡提到的其他架構是獨一無二的。）
foundation是這幾個架構中第二大的，在像zurb一樣實力雄厚的公司支援下，這個架構确實很強大，是的，就是foundation。畢 竟， foundation已經在很多大型網站上投入使用，包括 facebook, mozilla, ebay, yahoo!和國家地理等等。
建立者: zurb
目前版本:5.4.7
人氣: 在github上有18,000+ stars
描述: “世界上最優秀的響應式前端架構”
架構大小: 326kb
附加/插件: yes
獨特的元件: icon bar, clearing lightbox, flex video, keystrokes, joyride, pricing tables
文檔: 良好，還有許多額外的資源是可用的。
定制: 沒有gui編輯器,隻能手工定制。
浏覽器支援： chrome, firefox, safari, ie9+; ios, android, windows phone 7+
foundation 是一個提供業務支援、教育訓練和咨詢真正專業的架構。它還提供了很多資源幫助你更快和更容易學習和使用架構。
釋出:2013
目前版本:1.2.0
人氣: 在github上有12,900+ stars
描述: “基于自然語言有效原則的ui元件架構”
核心概念/原則: 語義，标簽的沖突性、響應式
架構大小: 552kb
預處理器: less
開始模闆/布局: no
圖示設定: font awesome
獨特的元件: 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
semantic 是這裡讨論的最創新和功能最全面的架構。在架構的總體結構和命名約定方面，也以清晰的邏輯和語義類超過了别的架構。
建立者: yahoo
釋出: 2013
目前版本: 0.5.0
人氣: 在github上有9,900+ stars
描述: “您可以在每一個web項目中使用的一組小的和響應式的css子產品”
架構大小: 18 kb
預處理器: none
圖示設定: 沒有，可以使用font awesome替代
附加/插件: none
獨特的元件:none
定制: 基本的gui定制器。
浏覽器支援：firefox的最新版本, chrome, safari; ie7+; ios 6.x, 7.x; android 4.x
pure隻提供一個基本的風格，使你的項目有一個幹淨的開始。對于工作中不需要一個全功能的架構隻需要有特定的元件的人來說是最理想的。
目前版本: 2.13.1
人氣: 在github上有3,800+ stars
描述: “一個輕量級的和子產品化的前端架構,用于快速開發和功能強大的web接口。”
核心概念/原則:rwd, 手機優先.
架構大小: 118 kb
預處理器: less, sass
獨特的元件: article, flex, cover, html editor
定制: 優秀的gui定制器。
浏覽器支援： chrome, firefox, safari, ie9+
uikit已經成功的在許多wordpress 主題上使用，它提供了一個靈活、強大的定制化機制，也可以通過gui定制器進行手動操作。
最後，在選擇合适的架構方面，讓我給你一些意見，這裡有一些重要的事情需要注意：
這個架構有足夠的人氣嗎？更大的普及意味着更多的人參與這個項目，是以，會有更多來自社群的教程和文章，更多真實的案例/網站，更多第三方擴充，與相關web開發産品更好地結合。巨大的人氣也意味着架構不太會過時，畢竟一個有着巨大群體使用的架構是不太可能被放棄的。
這個架構還在持續積極開發嗎?一個好的架構是需要結合最新的網絡技術不斷更新的，特别是關于移動方面的技術。
這個架構已經成熟了嗎？如果一個架構尚未在實際項目和測試中使用，那麼你可以随意玩，但依賴它做專業項目就不太明智了。
這個架構提供良好的文檔嗎？良好的文檔總是能為你的學習過程提供便利。
這個架構的特異性程度有多高？這裡的要點是，相比一個特異程度高的架構，使用一個更通用的架構要容易得多。在大多數情況下,最好選擇一個最小風格 的架構，因為它更容易定制。相比重寫或覆寫現有的規則，添加新的css規則是更友善和高效的流程。另外,如果你在現有架構的頭部添加新規則，那麼你将可能 會留下一些不被使用的規則，這将增加不必要的css檔案的大小。
最後,如果你仍然不确定，可以采用混搭方式。如果一個特定的架構不滿足您的需要，您可以從兩個或兩個以上的項目來混合元件。例如，你可以從一個架構得到較小的css樣式基礎從另一個架構得到一個優秀的栅格系統，再從第三個架構獲得更複雜的元件。子產品化萬歲!:)
你的想法是什麼呢？這些架構有什麼優點和缺點是這裡沒有提到的呢？你認為還有其他問題是應該被列出來的嗎？在下面的讨論中可以讓我們獲悉。
原文釋出時間：2015-01-09
本文來自雲栖合作夥伴“linux中國”