如今的 CSS 前端框架的發(fā)展非常迅猛，但是真正好的框架不多。在這篇文章中，我將對我認(rèn)為當(dāng)今***的 5 個框架進(jìn)行比較。每個框架都有它自己的強(qiáng)項和弱項，以及適合的領(lǐng)域，你需要根據(jù)這些特點(diǎn)來進(jìn)行選擇。例如，如果你的項目很簡單，那就沒有必要選擇復(fù)雜的框架。此外，還有一些選項是模塊化，這樣你就可以根據(jù)需要選擇所需的組件，或者來自不同框架混合的組件。

我選擇的這些框架是根據(jù)它們在 Github 的受歡迎程度來的，而***的毫無疑問是 Bootstrap。

(注意：文章中的一些數(shù)據(jù)日新月異，例如 Github 上點(diǎn)贊數(shù)、版本號等等。當(dāng)你閱讀這篇文章應(yīng)該意識到這些問題)

Bootstrap

Bootstrap 毫無爭議是今天最領(lǐng)先的前端框架。鑒于其超級強(qiáng)大的人氣，而且每天都還在不斷增長，你可以這個框架是非常棒的，不會讓你失望。

• 作者:Mark Otto and Jacob Thornton.
• 發(fā)布時間: 2011
• 當(dāng)前版本: 3.3.7
• 普及程序: 在 Github 上獲得 111,000 個點(diǎn)贊
• 描述: “Bootstrap 是***的 HTML、CSS 和 JavaScript 框架，用于開發(fā)響應(yīng)式、移動優(yōu)先的 Web 應(yīng)用”
• 核心概念:RWD 以及移動優(yōu)先
• 框架體積: 154 KB
• 預(yù)處理器:Less and Sass
• 響應(yīng)式: Yes
• 模塊化: Yes
• 支持模板和布局?: Yes
• 圖標(biāo)集:Glyphicons Halflings set
• 插件/擴(kuò)展: 沒有綁定，但是很多第三方的可以選擇
• 獨(dú)特的組件: Jumbotron
• 文檔: Good
• 定制: 基本的 GUI 定制工具，不行的是你需要手工輸入顏色值，因為沒有提供顏色拾取器
• 瀏覽器支持: Firefox, Chrome, Safari, IE8+ (IE 8 需要 Respond.js )
• 許可證:MIT

Bootstrap 注意事項

Bootstrap ***的優(yōu)勢是其普及的程度。技術(shù)上來說，它不一定比這個列表上的其他框架更好，但是它比其他框架提供了更多的資源(包括文章、教程、第三方插件和擴(kuò)展，主題構(gòu)建等等)。簡單來說，Bootstrap 使用廣泛，這是人們繼續(xù)選擇它的主要原因。

(注意: 這里的 “獨(dú)特組件” 的意思是與其他框架比較的)

2. Foundation (來自 ZURB)

Foundation 在這份列表中是第二大選擇。有了一個堅實(shí)的公司 ZURB 做背書，該框架有一個真正強(qiáng)大、而且很棒的基礎(chǔ)。此外，有很多大網(wǎng)站在使用該框架，包括：Facebook, Mozilla, Ebay, Yahoo! 以及國家地理雜志等等。

• 所屬: ZURB
• 發(fā)布時間: 2011
• 當(dāng)前時間:6.3.1
• 受歡迎程度: 在 Github 收獲 25,400 個點(diǎn)贊
• 描述: “***級的響應(yīng)式前端框架”
• 核心概念: RWD, 移動優(yōu)先，語義化
• 框架體積: 197.5 KB
• 預(yù)處理器: Sass
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板/布局: Yes
• 圖標(biāo)集:Foundation Icon Fonts
• 插件/擴(kuò)展: Yes
• 獨(dú)特組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• 文檔: 好，提供很多額外資源
• 定制: 基本的 GUI 定制器，類似 Bootstrap 那款
• 瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• 許可證: MIT

Foundation 備注

Foundation 是一個真正專業(yè)的框架，提供商業(yè)支持和咨詢服務(wù)。同時提供很多資源去幫你快速輕松的學(xué)習(xí)和使用該框架。

3. Semantic UI

Semantic UI 一直在持續(xù)發(fā)展，構(gòu)建更具語義的 Web 網(wǎng)站。其利用自然語言原則，使得代碼更加具備可讀性和易于理解。

1. 作者:Jack Lukic
2. 發(fā)布時間: 2013
3. 當(dāng)前版本: 2.2
4. 受歡迎程度: 在 Github 上獲得 34,762 個贊
5. 項目描述: “一個 UI 組件框架，基于自然語言特點(diǎn)”
6. 核心概念: 語義、標(biāo)簽、響應(yīng)式
7. 框架提及: 806 KB
8. 預(yù)處理器: Less
9. 響應(yīng)式: Yes
10. 模塊化: Yes
11. 模板布局: 支持，提供一些基礎(chǔ)模板
12. 圖標(biāo)集: Font Awesome
13. 擴(kuò)展、插件: No
14. 獨(dú)特組件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
15. 文檔: 非常棒，組織良好，提供入門、定制和主題創(chuàng)建.
16. 定制: 不提供 GUI 定制器，只有手工定制
17. 瀏覽器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
18. 許可證: MIT

Semantic UI 注意事項

Semantic 是***創(chuàng)新以及全功能的框架。框架的整體結(jié)構(gòu)和命名都有明確的邏輯和語義，在這方面碾壓其他框架。

4. Pure 來自 Yahoo!

Pure 是一個輕量級、模塊化的框架，使用純 CSS 編寫，其包括的所有組件都可以在一起或者單獨(dú)使用。

• 所屬: Yahoo
• 發(fā)布時間: 2013
• 當(dāng)前版本: 0.6.2
• 受歡迎程度: 在 Github 收獲 16,637 個點(diǎn)贊
• 描述: “一組小的、響應(yīng)式的 CSS 模塊，可以用于任一 Web 項目”
• 核心概念:SMACSS, 極簡主義.
• 框架提及: 16 KB
• 預(yù)處理器: None
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板/布局: Yes
• 圖標(biāo)集合: 無，你可以使用 Font Awesome .
• 插件/擴(kuò)展: None
• 獨(dú)特組件: None
• 文檔: 好
• 定制: 基本的 GUI 皮膚構(gòu)建器

瀏覽器支持: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

許可證:Yahoo! Inc. BSD

Pure 備注說明

Pure 只提供了很簡單的基本骨架，這對很多不需要一個全功能框架的人來說是非常棒的。

5. UIkit 來自 YOOtheme

UIkit 是一個易于使用和定制的簡單組件集合。雖然與其競爭對手比較，受歡迎程度沒那么高，但是它同樣提供了相同的功能和質(zhì)量。

• 所屬:YOOtheme
• 發(fā)布時間: 2013
• 當(dāng)前版本: 3.0.0
• 受歡迎程度: 在 Github 收獲 9,422 個點(diǎn)贊
• 描述: “一個輕量級模塊化的前端框架，用于快速開發(fā)強(qiáng)大的 Web 界面”
• 核心概念: RWD, 移動優(yōu)先
• 框架提及: 326.9 KB (384.4 KB 如果包含 uikit-icons.min.js 和相關(guān) SVG 圖標(biāo)時)
• 預(yù)處理器: Less, Sass
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板/布局: Yes
• 圖標(biāo)集: UIkit 包含自己的 SVG 圖標(biāo)系統(tǒng)和庫
• 插件/擴(kuò)展: Yes
• 獨(dú)特組件: Article, Flex, Cover, HTML Editor
• 文檔: Good
• 定制: 高級 GUI 定制器，只在版本 2 中提供
• 瀏覽器支持: Chrome, Firefox, Safari, IE9+
• 許可證: MIT

UIkit 備注說明

UIkit 在很多的 WordPress themes 中成功使用。提供了靈活而強(qiáng)大的手工定制機(jī)制(老版本還提供高級的 GUI 定制器)

到底哪個框架更適合你呢?

***讓我們給你一些框架選擇的指南。下面是一些你在選擇框架時需要著重考慮的事項：

框架是否有足夠的 受歡迎程度? 受歡迎程度越高說明更多的人在使用這個項目，同時也擁有更多的教程以及文章，更多實(shí)際的例子和網(wǎng)站，更多第三方的擴(kuò)展和更好的集成到相關(guān)的 Web 開發(fā)項目。同時也說明該框架不容易過時，一個強(qiáng)大社區(qū)支持的項目是不太可能被放棄的

框架是否仍然 開發(fā)活躍? 一個好的框架必須緊跟技術(shù)發(fā)展的步伐，支持***的 Web 技術(shù)，特別是對移動方面的技術(shù)支持

框架是否已經(jīng) 成熟? 如果一個還沒有在實(shí)際的項目中開始使用和測試，那么在你的專業(yè)項目中選擇它是不明智的

框架是否提供 良好的文檔? 好的文檔可是為了更方便的學(xué)習(xí)

框架的 專業(yè)水準(zhǔn) 如何?這一點(diǎn)主要是一個更通用的框架的專業(yè)水準(zhǔn)應(yīng)該很高，但又非常容易學(xué)習(xí)使用。在大多數(shù)情況下，***選擇最少樣式的，因為這樣更容易進(jìn)行定制。添加新的 CSS 規(guī)則比修改和重寫現(xiàn)有的規(guī)則更加便捷和高效。此外，如果你在已有規(guī)則之上增加新的規(guī)則，就會發(fā)現(xiàn)這些無用的規(guī)則加大了 CSS 本身的體積。

如果你還是無法選擇，你可以使用混搭的方法。如果一個框架無法完全滿足你的需求，你可以從兩個或者更多的框架中選擇你所需要的組件。例如，你可以用一個框架中的基本 CSS 樣式，然后用另外一個框架中表格系統(tǒng)等等。這要感謝模塊化的設(shè)計 —— 模塊化萬歲!***還需要提到的是，由于在主流的瀏覽器中對 Flexbox 和表格布局都有很好的支持，所以現(xiàn)在構(gòu)建復(fù)雜的布局已經(jīng)變得非常容易。這個也不斷的在鼓勵更多的開發(fā)者拋棄前端框架，從頭開發(fā)自己的框架。

你是怎么想的呢?我是否有漏掉這些框架的優(yōu)缺點(diǎn)描述嗎?如果你有其他的想法，請別忘了在評論中發(fā)表你的意見。