@寸志 ：現(xiàn)如今快要被各種各樣的 CSS 前端框架給淹沒(méi)了，真做的不錯(cuò)的其實(shí)也就那么幾個(gè)。本文將對(duì)比五個(gè)我認(rèn)為是現(xiàn)在最好的框架。這些框架每一個(gè)都有自己的優(yōu)缺點(diǎn)和適用的應(yīng)用類型， 你需要根據(jù)自己的需要來(lái)選擇不同的框架。

例如，如果你的項(xiàng)目簡(jiǎn)單，就不需要使用一個(gè)復(fù)雜的框架。又或者，很多框架都是模塊化的，你可以只是用你需要的模塊，或者把不同框架的模塊混到一起使用。

跟上潮流，來(lái)個(gè)響應(yīng)式網(wǎng)站：《重磅來(lái)襲！設(shè)計(jì)師不應(yīng)該錯(cuò)過(guò)的響應(yīng)式設(shè)計(jì)框架》

我將要介紹的這些框架的順序與它們?cè)?GitHub 的流行程度有關(guān)。自然，就是從最流行的 Bootstrap 說(shuō)起。

提示：在接下的幾周或者幾個(gè)月內(nèi)，下面的一些信息很可能會(huì)過(guò)時(shí)。比如 GitHub 上的 star 數(shù)、版本號(hào)等等。如果你在文章發(fā)布很久之后來(lái)讀本文的話，一定別忘了這一點(diǎn)。還有，下面這些框架的大小指的是經(jīng)過(guò)壓縮的必要的 CSS 和 JavaScript 文件大小。

Bootstrap

Bootstrap?無(wú)疑地是目前這些類庫(kù)的領(lǐng)跑者。它非常流行，流行程度還在一天天的增加。這個(gè)令人贊嘆的工具集不會(huì)讓你失望的，在你構(gòu)建成功站點(diǎn)之路上少不了它。

• 作者：Mark Otto 和 Jacob Thornton
• 發(fā)布時(shí)間：2011年
• 最新版本：3.3.
• 流行程度：GitHub 上 75,000+ 的 star
• 介紹：“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，可用來(lái)開(kāi)響應(yīng)式的移動(dòng)有限的 Web 項(xiàng)目?！?/li>
• 核心理念/原則：響應(yīng)式與移動(dòng)優(yōu)先
• 框架大?。?45 KB
• 預(yù)處理器：Less 和 Sass
• 響應(yīng)式：是
• 模塊化：是
• 上手模塊/布局：是
• 字體圖標(biāo)：大半 Glyphicon 圖標(biāo)
• 插件/擴(kuò)展： 無(wú)，不過(guò)有大量的第三方插件
• 特色組件： 超大屏設(shè)計(jì)
• 文檔： 完善
• 自定義： 基礎(chǔ)的 GUI 自定義；不過(guò)你需要手動(dòng)輸入顏色值，因?yàn)椴恢С诸伾x擇器
• 瀏覽器支持： Firefox、Chrome、Safari、IE8+ （IE8 的話需要使用 Respond.js）
• 開(kāi)源協(xié)議： MIT

Bootstrap 使用心得

Bootstrap 最大的優(yōu)勢(shì)就是它非常流行。從技術(shù)上講，它并不是比其他在列框架要優(yōu)秀。只是它有很多資源（文章、教程、第三方插件和擴(kuò)展以及主題構(gòu)造器等等），比起其他四個(gè)框架合到一起還要多。簡(jiǎn)單地講，Bootstrap 就是無(wú)處不在。這也是大家繼續(xù)使用它的原因。

提示:當(dāng)我說(shuō)“特色”的組件，這種特色就是針對(duì)目前列出的這些框架而言的。

Foundation（ZURB）

Foundation?是這個(gè)領(lǐng)域的第二大玩家。擁有像 ZURB?這樣的公司在背后支持，不得不說(shuō)它確實(shí)有一個(gè)非常堅(jiān)實(shí)的基礎(chǔ)?？傊?，F(xiàn)oundation 被很多大的網(wǎng)站采用。包括 Facebook、Mozilla、Ebay、Yahoo 以及 National Geographic 等等。

• 作者： ZURB
• 發(fā)布時(shí)間： 2011
• 最新版本： 5.4.7
• 流行程度： GitHub 上 18,000+ 的 star
• 介紹： “世界上最先進(jìn)的響應(yīng)式前端框架”
• 核心理念/原則： 響應(yīng)式、移動(dòng)優(yōu)先、語(yǔ)義化
• 框架大?。?326 KB
• 預(yù)處理器： Sass
• 響應(yīng)式： 是
• 模塊化： 是
• 上手模塊/布局： 是
• 字體圖標(biāo)： Foundation 字體圖標(biāo)
• 插件/擴(kuò)展： 有
• 特色組件： Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
• 文檔： 完善，還有很多其他資源
• 自定義： 無(wú) GUI 的自定義工具，需要自己手動(dòng)修改
• 瀏覽器支持： Chrome、Firefox、Safari、IE9+；iOS、Android、Windows Phone 7+
• 開(kāi)源協(xié)議： MIT

Foundation 使用心得

Foundation 的確是一個(gè)非常專業(yè)的框架，有商業(yè)的支持、培訓(xùn)以及外包。它同時(shí)還提供很多資源，幫助你更加快速更加容易地學(xué)習(xí)和使用這個(gè)框架。

Semantic UI

Semantic UI?一直在努力讓網(wǎng)站建設(shè)更加語(yǔ)義化。它利用了自然語(yǔ)言的原則，使得代碼更容易讀更容易理解。

• 作者：Jack Lukic
• 發(fā)布時(shí)間： 2013
• 最新版本： 1.2.0
• 流行程度： GitHub 上 12,900+ 的 star
• 介紹：“一個(gè) UI 模塊框架，基于來(lái)自自然語(yǔ)言的一些有用的原則。”
• 核心理念/原則： 語(yǔ)義化、tag ambivalence、響應(yīng)式
• 框架大小： 552 KB
• 預(yù)處理器： Less
• 響應(yīng)式： 是
• 模塊化： 是
• 上手模塊/布局： 無(wú)
• 字體圖標(biāo)： Font Awesome
• 插件/擴(kuò)展： 無(wú)
• 特色組件： Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer
  Rating、Shape
• 文檔： 非常好。Semantic 有組織良好的文檔，外加一個(gè)單獨(dú)網(wǎng)站提供指南，幫助用戶快速上手，自定義和創(chuàng)建主題。
• 自定義： 無(wú) GUI 的自定義工具，需手動(dòng)修改
• 瀏覽器支持： Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10
• 開(kāi)源協(xié)議： MIT

Semantic UI 使用心得

在這些框架中，Semantic 是最具革命性特性最全的框架。為了讓樣式邏輯清晰，語(yǔ)義化，整個(gè)框架的結(jié)構(gòu)以及命名約定都要優(yōu)于其他框架。

Pure（Yahoo!）

Pure?是一個(gè)輕量的、模塊化的框架——使用純 CSS 編寫的——根據(jù)你的需要，可以組合或者分開(kāi)使用 Pure 的模塊。

• 作者： Yahoo
• 發(fā)布時(shí)間： 2013
• 當(dāng)前版本： 0.5.0
• 流行程度： GitHub 上 9,900+ 的 star
• 介紹： “一系列小的，響應(yīng)式的 CSS 模塊，可以用在你的每一個(gè)項(xiàng)目中?！?/li>
• 核心理念/原則： SMACSS、極簡(jiǎn)主義
• 框架大小： 18 KB
• 預(yù)處理器： 無(wú)
• 響應(yīng)式： 是
• 模塊化： 是
• 上手模塊/布局： 有
• 字體圖標(biāo)： 無(wú)，你可以使用 Font Awesome
• 插件/擴(kuò)展： 無(wú)
• 特色組件： 無(wú)
• 文檔： 好
• 自定義： 基礎(chǔ)的 GUI 皮膚構(gòu)造工具
• 瀏覽器支持： 最新的Firefox、Chrome、Safari； IE7+、iOS 6.x、7.x；Android 4.x
• 開(kāi)原協(xié)議： Yahoo! Inc. BSD

Pure 使用心得

Pure 只提供一套極簡(jiǎn)的樣式，便于你從零開(kāi)始你的項(xiàng)目。對(duì)于那些不需要一個(gè)全?？蚣?，只需要某些組件的加入到他們自己的項(xiàng)目中的用戶來(lái)講，這個(gè)框架非常符合。

UIkit（YOOtheme）

UIkit?包含了一些列簡(jiǎn)潔的易用的便于自定義的組件。盡管它沒(méi)有其他在列的框架流行，但是它提供了相當(dāng)?shù)墓δ芎唾|(zhì)量。

• 作者： YOOtheme
• 發(fā)布時(shí)間： 2013
• 當(dāng)前版本： 2.13.1
• 流行程度： GitHub 上 3,800+ 的 star
• 介紹： “輕量的，模塊化的前端框架，可用來(lái)快速構(gòu)建強(qiáng)大的網(wǎng)頁(yè)界面”
• 核心理念/原則： 響應(yīng)式、移動(dòng)優(yōu)先
• 框架大?。?118 KB
• 預(yù)處理器： Less、Sass
• 響應(yīng)式： 是
• 模塊化： 是
• 上手模塊/布局： 是
• 字體圖標(biāo)： Font Awesome
• 插件/擴(kuò)展： 有
• 特色組件： Article、Flex、Cover、HTML Editor
• 文檔： 好
• 自定義： 高級(jí)的 GUI 自定義工具
• 瀏覽器支持： Chrome, Firefox, Safari, IE9+
• 開(kāi)原協(xié)議： MIT

UIkit 使用心得

UIkit 在WordPress 主題中很成功。它提供了強(qiáng)大靈活的自定義機(jī)制，可以手動(dòng)修改或者使用它的提供的 GUI 自定義工具來(lái)實(shí)現(xiàn)。

如何選擇框架？

最后，我來(lái)給一些選擇框架的建議。下面是一些選擇框架需要注重的點(diǎn):

• 這個(gè)框架足夠流行嗎？流行意味著有更多的人參與到項(xiàng)目中來(lái)，因此，社區(qū)中有更多的文章和教程，現(xiàn)實(shí)中更多的示例和網(wǎng)站，會(huì)有更多的第三方擴(kuò)展，當(dāng)然能夠更好地與現(xiàn)實(shí)的web開(kāi)發(fā)項(xiàng)目結(jié)合。極其流行意味著這個(gè)框架經(jīng)得住未來(lái)的考驗(yàn)；
• 擁有龐大社區(qū)的框架最不可能被拋棄；
• 框架是否還在活躍地開(kāi)發(fā)中？一個(gè)優(yōu)秀的框架需要不斷地提升自己，緊跟最新 Web 技術(shù)的發(fā)展，尤其對(duì)于移動(dòng)來(lái)說(shuō)；
• 這個(gè)框架是否已經(jīng)成熟？如果某個(gè)框架還沒(méi)有在真實(shí)項(xiàng)目中充分地使用和測(cè)試，只可能試著玩玩，如果用到專業(yè)的項(xiàng)目中的話并不是一個(gè)明智的選擇；
• 框架是否有完善的文檔？最后好能有完善的文檔，這樣可以加快學(xué)習(xí)的進(jìn)程；
• 框架的詳細(xì)程度如何？這里核心的點(diǎn)在于一個(gè)更通用的框架更容易使用，比較于那些詳細(xì)程度很高的框架而言。在很多情況下，最好的就是選擇一個(gè)有最少樣式的框架，因?yàn)檫@樣的話比較容易自定義。添加新的 CSS 規(guī)則要比比對(duì)復(fù)寫現(xiàn)有的樣式規(guī)則方便多了。而且，如果你在已有的樣式上添加新的樣式，你最終獲得的就是無(wú)用的樣式規(guī)則，這將會(huì)增加 CSS 文件的大小。

最后，如果你還是不確定，你可以采用一種混合搭配的方式。如果某個(gè)框架無(wú)法滿足你的需求，你可以混用一些來(lái)自其他框架來(lái)的組件。例如，你可以使用某個(gè)框架的精簡(jiǎn)的 CSS 基礎(chǔ)樣式，使用來(lái)自另外一個(gè)框架的柵格系統(tǒng)，以及從第三個(gè)框架更為復(fù)雜的模塊。模塊化萬(wàn)歲！:)

你怎么看的？這些框架還有哪些策略或者弱點(diǎn)在這里沒(méi)有提到的？還有哪些框架你覺(jué)得應(yīng)該列舉在這里？你可以在下面回復(fù)給我們。

【設(shè)計(jì)師快速建站的必備好文】

手把手教你搭建最流行的WordPress網(wǎng)站！
《新手也能做網(wǎng)站！教你搭建一個(gè)超酷的WORDPRESS博客》

風(fēng)趣幽默的前端基礎(chǔ)全科普！
《給設(shè)計(jì)師們的代碼指南！HTML與CSS簡(jiǎn)介（一）》

響應(yīng)式網(wǎng)站設(shè)計(jì)的神器推薦！
《最熱門工具推薦！為響應(yīng)式網(wǎng)站而生的40款柵格神器》

原文地址：sitepoint
譯文地址：zhuanlan.zhihu
譯者：@寸志

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege