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

我選擇的這些框架是根據(jù)它們?cè)?Github 的受歡迎程度來(lái)的，而***的毫無(wú)疑問(wèn)是 Bootstrap。

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

Bootstrap

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

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

Bootstrap 注意事項(xiàng)

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

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

2. Foundation (來(lái)自 ZURB)

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

• 所屬: ZURB
• 發(fā)布時(shí)間: 2011
• 當(dāng)前時(shí)間:6.3.1
• 受歡迎程度: 在 Github 收獲 25,400 個(gè)點(diǎn)贊
• 描述: “***級(jí)的響應(yīng)式前端框架”
• 核心概念: RWD, 移動(dòng)優(yōu)先，語(yǔ)義化
• 框架體積: 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 定制器，類(lèi)似 Bootstrap 那款
• 瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• 許可證: MIT

Foundation 備注

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

3. Semantic UI

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

1. 作者:Jack Lukic
2. 發(fā)布時(shí)間: 2013
3. 當(dāng)前版本: 2.2
4. 受歡迎程度: 在 Github 上獲得 34,762 個(gè)贊
5. 項(xiàng)目描述: “一個(gè) UI 組件框架，基于自然語(yǔ)言特點(diǎn)”
6. 核心概念: 語(yǔ)義、標(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. 文檔: 非常棒，組織良好，提供入門(mén)、定制和主題創(chuàng)建.
16. 定制: 不提供 GUI 定制器，只有手工定制
17. 瀏覽器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
18. 許可證: MIT

Semantic UI 注意事項(xiàng)

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

4. Pure 來(lái)自 Yahoo!

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

• 所屬: Yahoo
• 發(fā)布時(shí)間: 2013
• 當(dāng)前版本: 0.6.2
• 受歡迎程度: 在 Github 收獲 16,637 個(gè)點(diǎn)贊
• 描述: “一組小的、響應(yīng)式的 CSS 模塊，可以用于任一 Web 項(xiàng)目”
• 核心概念:SMACSS, 極簡(jiǎn)主義.
• 框架提及: 16 KB
• 預(yù)處理器: None
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板/布局: Yes
• 圖標(biāo)集合: 無(wú)，你可以使用 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 備注說(shuō)明

Pure 只提供了很簡(jiǎn)單的基本骨架，這對(duì)很多不需要一個(gè)全功能框架的人來(lái)說(shuō)是非常棒的。

5. UIkit 來(lái)自 YOOtheme

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

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

UIkit 備注說(shuō)明

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

到底哪個(gè)框架更適合你呢?

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

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

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

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

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

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

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

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