如今的 CSS 前端框架的發展非常迅猛，但是真正好的框架不多。在這篇文章中，我將對我認為當今最好的 5 個框架進行比較。每個框架都有它自己的強項和弱項，以及適合的領域，你需要根據這些特點來進行選擇。例如，如果你的項目很簡單，那就沒有必要選擇複雜的框架。此外，還有一些選項是模塊化，這樣你就可以根據需要選擇所需的組件，或者來自不同框架混合的組件。
我選擇的這些框架是根據它們在 Github 的受歡迎程度來的，而最受歡迎的毫無疑問是 Bootstrap。
(注意：文章中的一些數據日新月異，例如 Github 上點讚數、版本號等等。當你閱讀這篇文章應該意識到這些問題)
Bootstrap
Bootstrap 毫無爭議是今天最領先的前端框架。鑑於其超級強大的人氣，而且每天都還在不斷增長，你可以這個框架是非常棒的，不會讓你失望。
作者:Mark Otto and Jacob Thornton. 發布時間: 2011 當前版本: 3.3.7 普及程序: 在 Github 上獲得 111,000 個點讚 描述: 「Bootstrap 是最受歡迎的 HTML、CSS 和 JavaScript 框架，用於開發響應式、移動優先的 Web 應用」 核心概念:RWD 以及移動優先 框架體積: 154 KB 預處理器:Less and Sass 響應式: Yes 模塊化: Yes 支持模板和布局?: Yes 圖標集:Glyphicons Halflings set 插件/擴展: 沒有綁定，但是很多第三方的可以選擇 獨特的組件: Jumbotron 文檔: Good 定製: 基本的 GUI 定製工具，不行的是你需要手工輸入顏色值，因為沒有提供顏色拾取器 瀏覽器支持: Firefox, Chrome, Safari, IE8+ (IE 8 需要 Respond.js ) 許可證:MIT
Bootstrap 注意事項
Bootstrap 最大的優勢是其普及的程度。技術上來說，它不一定比這個列表上的其他框架更好，但是它比其他框架提供了更多的資源(包括文章、教程、第三方插件和擴展，主題構建等等)。簡單來說，Bootstrap 使用廣泛，這是人們繼續選擇它的主要原因。
(注意: 這裡的 「獨特組件」 的意思是與其他框架比較的)
2. Foundation (來自 ZURB)
Foundation 在這份列表中是第二大選擇。有了一個堅實的公司 ZURB 做背書，該框架有一個真正強大、而且很棒的基礎。此外，有很多大網站在使用該框架，包括：Facebook, Mozilla, Ebay, Yahoo! 以及國家地理雜誌等等。
所屬: ZURB 發布時間: 2011 當前時間:6.3.1 受歡迎程度: 在 Github 收穫 25,400 個點讚 描述: 「最高級的響應式前端框架」 核心概念: RWD, 移動優先，語義化 框架體積: 197.5 KB 預處理器: Sass 響應式: Yes 模塊化: Yes 模板/布局: Yes 圖標集:Foundation Icon Fonts 插件/擴展: Yes 獨特組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables 文檔: 好，提供很多額外資源 定製: 基本的 GUI 定製器，類似 Bootstrap 那款 瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+ 許可證: MIT
Foundation 備註
Foundation 是一個真正專業的框架，提供商業支持和諮詢服務。同時提供很多資源去幫你快速輕鬆的學習和使用該框架。
3. Semantic UI
Semantic UI 一直在持續發展，構建更具語義的 Web 網站。其利用自然語言原則，使得代碼更加具備可讀性和易於理解。
作者:Jack Lukic 發布時間: 2013 當前版本: 2.2 受歡迎程度: 在 Github 上獲得 34,762 個贊 項目描述: 「一個 UI 組件框架，基於自然語言特點」 核心概念: 語義、標籤、響應式 框架提及: 806 KB 預處理器: Less 響應式: Yes 模塊化: Yes 模板布局: 支持，提供一些基礎模板 圖標集: Font Awesome 擴展、插件: No 獨特組件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape. 文檔: 非常棒，組織良好，提供入門、定製和主題創建. 定製: 不提供 GUI 定製器，只有手工定製 瀏覽器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10 許可證: MIT
Semantic UI 注意事項
Semantic 是最具創新以及全功能的框架。框架的整體結構和命名都有明確的邏輯和語義，在這方面碾壓其他框架。
4. Pure 來自 Yahoo!
Pure 是一個輕量級、模塊化的框架，使用純 CSS 編寫，其包括的所有組件都可以在一起或者單獨使用。
所屬: Yahoo 發布時間: 2013 當前版本: 0.6.2 受歡迎程度: 在 Github 收穫 16,637 個點讚 描述: 「一組小的、響應式的 CSS 模塊，可以用於任一 Web 項目」 核心概念:SMACSS, 極簡主義. 框架提及: 16 KB 預處理器: None 響應式: Yes 模塊化: Yes 模板/布局: Yes 圖標集合: 無，你可以使用 Font Awesome . 插件/擴展: None 獨特組件: None 文檔: 好 定製: 基本的 GUI 皮膚構建器
瀏覽器支持: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
許可證:Yahoo! Inc. BSD
Pure 備註說明
Pure 只提供了很簡單的基本骨架，這對很多不需要一個全功能框架的人來說是非常棒的。
5. UIkit 來自 YOOtheme
UIkit 是一個易於使用和定製的簡單組件集合。雖然與其競爭對手比較，受歡迎程度沒那麼高，但是它同樣提供了相同的功能和質量。
所屬:YOOtheme 發布時間: 2013 當前版本: 3.0.0 受歡迎程度: 在 Github 收穫 9,422 個點讚 描述: 「一個輕量級模塊化的前端框架，用於快速開發強大的 Web 界面」 核心概念: RWD, 移動優先 框架提及: 326.9 KB (384.4 KB 如果包含 uikit-icons.min.js 和相關 SVG 圖標時) 預處理器: Less, Sass 響應式: Yes 模塊化: Yes 模板/布局: Yes 圖標集: UIkit 包含自己的 SVG 圖標系統和庫 插件/擴展: Yes 獨特組件: Article, Flex, Cover, HTML Editor 文檔: Good 定製: 高級 GUI 定製器，只在版本 2 中提供 瀏覽器支持: Chrome, Firefox, Safari, IE9+ 許可證: MIT
UIkit 備註說明
UIkit 在很多的 WordPress themes 中成功使用。提供了靈活而強大的手工定製機制(老版本還提供高級的 GUI 定製器)
到底哪個框架更適合你呢?
最後讓我們給你一些框架選擇的指南。下面是一些你在選擇框架時需要著重考慮的事項：
框架是否有足夠的 受歡迎程度? 受歡迎程度越高說明更多的人在使用這個項目，同時也擁有更多的教程以及文章，更多實際的例子和網站，更多第三方的擴展和更好的集成到相關的 Web 開發項目。同時也說明該框架不容易過時，一個強大社區支持的項目是不太可能被放棄的
框架是否仍然 開發活躍? 一個好的框架必須緊跟技術發展的步伐，支持最新的 Web 技術，特別是對移動方面的技術支持
框架是否已經 成熟? 如果一個還沒有在實際的項目中開始使用和測試，那麼在你的專業項目中選擇它是不明智的
框架是否提供 良好的文檔? 好的文檔可是為了更方便的學習
框架的 專業水準 如何?這一點主要是一個更通用的框架的專業水準應該很高，但又非常容易學習使用。在大多數情況下，最好選擇最少樣式的，因為這樣更容易進行定製。添加新的 CSS 規則比修改和重寫現有的規則更加便捷和高效。此外，如果你在已有規則之上增加新的規則，就會發現這些無用的規則加大了 CSS 本身的體積。
如果你還是無法選擇，你可以使用混搭的方法。如果一個框架無法完全滿足你的需求，你可以從兩個或者更多的框架中選擇你所需要的組件。例如，你可以用一個框架中的基本 CSS 樣式，然後用另外一個框架中表格系統等等。這要感謝模塊化的設計 —— 模塊化萬歲!最後還需要提到的是，由於在主流的瀏覽器中對 Flexbox 和表格布局都有很好的支持，所以現在構建複雜的布局已經變得非常容易。這個也不斷的在鼓勵更多的開發者拋棄前端框架，從頭開發自己的框架。
你是怎麼想的呢?我是否有漏掉這些框架的優缺點描述嗎?如果你有其他的想法，請別忘了在評論中發表你的意見。
點讚 0