From: https://blog.csdn.net/qq_41852103/article/details/79619250

現(xiàn)在有大量的CSS前端框架可用。但真正好的屈指可數(shù)。本文將比較五個最佳前端框架，每個框架都有自己的長處和短處，以及特定的應(yīng)用領(lǐng)域，使你可以根據(jù)特定項(xiàng)目的需求進(jìn)行選擇。例如，如果項(xiàng)目很簡單，則不需要使用復(fù)雜的框架。此外，許多選項(xiàng)都是模塊化的，只允許使用你需要的組件，甚至可以混合來自不同前端框架的組件。

比較他們，有很多參考指標(biāo)。我們基于這些框架在GitHub的流行度展開。當(dāng)然很多指標(biāo)會隨著GitHub中的star和版本號，而發(fā)生變化。

在這里我還是要推薦下我自己建的web前端開發(fā)學(xué)習(xí)群：731669587，群里都是學(xué)web前端開發(fā)的，如果你正在學(xué)習(xí)前端 ，小編歡迎你加入，今天分享的這個案例已經(jīng)上傳到群文件，大家都是軟件開發(fā)黨，不定期分享干貨（只有前端軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的前端進(jìn)階資料和高級開發(fā)教程，歡迎進(jìn)階中和進(jìn)想深入前端的小伙伴。

什么是適合的、正確的前端框架？

提供一些選擇正確前端框架的建議。以下是一些需要注意的重要事項(xiàng)：

• 框架是否有足夠的知名度？更大的知名度意味著參與該項(xiàng)目的人越來越多，因此，來自社區(qū)的更多教程和文章，更實(shí)際的示例/網(wǎng)站，更多第三方擴(kuò)展以及與相關(guān)Web開發(fā)產(chǎn)品的更好集成。大受歡迎也意味著該框架更具前瞻性：圍繞它的社區(qū)更大的框架不太可能被拋棄。

• 框架正在積極發(fā)展中嗎？一個好的框架需要隨著最新的web技術(shù)不斷升級，特別是在移動方面。

• 框架已經(jīng)成熟了嗎？如果一個特定的框架還沒有在現(xiàn)實(shí)的項(xiàng)目中使用和測試，那么你可以自由地使用它，但是依靠它來進(jìn)行你的專業(yè)項(xiàng)目可能是不明智的。

• 框架是否提供了良好的文檔？為了促進(jìn)學(xué)習(xí)過程，始終需要良好的文檔。

• 什么是框架的特異性水平？這里的主要觀點(diǎn)是，與具有高級特異性的框架相比，更通用的框架更容易處理。在大多數(shù)情況下，最好選擇應(yīng)用最少樣式的框架，因?yàn)槎ㄖ埔菀椎枚唷Ｅc覆蓋或覆蓋現(xiàn)有的CSS規(guī)則相比，添加新的CSS規(guī)則更為方便和有效。此外，如果你在現(xiàn)有規(guī)則的基礎(chǔ)上添加新規(guī)則，則最終會出現(xiàn)未使用的規(guī)則，這會不必要地增加CSS的大小。

• 如果你還不確定，可以采用混合搭配的方式。如果特定的框架不能滿足你的需求，可以混合來自兩個或更多項(xiàng)目的組件。例如，可以從一個框架獲得較小的CSS基礎(chǔ)樣式，從另一個框架獲得一個首選的網(wǎng)格系統(tǒng)，而從第三個獲得更復(fù)雜的組件。

• 最后，應(yīng)該指出的是，如今，通過Flexbox和Grid Layout在最新版本的主流瀏覽器中提供良好的支持，構(gòu)建復(fù)雜布局比以往任何時候都容易。單憑這一事實(shí)可能會鼓勵更多的程序員離開前端框架的拐杖并從頭開始編寫其布局。

1.Bootstrap

Bootstrap是當(dāng)前可用前端框架中無可爭議的NO.1。鑒于其巨大的知名度，每天仍在不斷增長，可以肯定，這個奇妙的工具不會讓你失望。

• 創(chuàng)作者：Mark Otto and Jacob Thornton.

• 發(fā)布時間：2011年

• 當(dāng)前版本：4.0

• 人氣：GitHub上有122825顆星

• 描述：“簡潔，直觀且功能強(qiáng)大的前端框架，可實(shí)現(xiàn)更快、更輕松的網(wǎng)頁開發(fā)。”

• 核心概念/原則：RWD和移動優(yōu)先。

• 框架大小：578 KB（預(yù)編譯的zip文件夾）

• 預(yù)處理器：Sass

• 響應(yīng)：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標(biāo)集：不包括

• 附加功能/附加組件：沒有捆綁，但有許多第三方插件可用。

• 獨(dú)特的組件（與下面前端框架相比較）：Jumbotron，Card

• 文檔：非常好

• 定制：為網(wǎng)格系統(tǒng)和重啟提供獨(dú)立文件選項(xiàng)，使用Sass輕松定制；沒有在線定制器

• 瀏覽器支持：最新版本的Firefox，Chrome，Safari，IE810-11-Microsoft Edge。

• 許可證：MIT

Bootstrap的注意事項(xiàng)

Bootstrap的主要優(yōu)勢在于其廣受歡迎。從技術(shù)上講，它不一定比其他的框架好，但與其他四個前端框架相比較，它提供了更多的資源（文章和教程，第三方插件和擴(kuò)展，主題構(gòu)建器等）。總之，Bootstrap無處不在。這是程序員繼續(xù)選擇它的主要原因。

2.Foundation

Foundation是頂部前端框架的第二大玩家。有了像ZURB這樣堅(jiān)實(shí)的后盾，這個框架有了一個真正強(qiáng)大的基礎(chǔ)。畢竟，Foundation在包括Facebook，Mozilla，易趣，雅虎在內(nèi)的許多大型網(wǎng)站上使用，還有國家地理等等。

• 創(chuàng)作者：ZURB

• 發(fā)布時間：2011年

• 當(dāng)前版本：6

• 人氣：GitHub上有27130顆星

• 描述：“先進(jìn)的響應(yīng)式前端框架”

• 核心概念/原則：RWD，移動優(yōu)先，語義

• 框架大小：197.5 KB

• 預(yù)處理器：Sass

• 響應(yīng)：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標(biāo)集：基礎(chǔ)圖標(biāo)字體

• 附加功能/附加組件：是的

• 獨(dú)特的組件：Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

• 文檔：很好，有很多額外的資源可用。

• 定制：基本的GUI定制器

• 瀏覽器支持：Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+

• 許可證：MIT

Foundation注意事項(xiàng)

Foundation是一個真正專業(yè)的前端框架，提供商業(yè)支持，培訓(xùn)和咨詢服務(wù)。它還提供了許多資源，可幫助你更快，更輕松地學(xué)習(xí)和使用框架。

3.Semantic UI

Semantic UI是使構(gòu)建網(wǎng)站更加語義化的框架。它利用自然語言原理，從而使代碼更具可讀性和可理解性。

• 創(chuàng)作者：Jack Lukic

• 發(fā)布：2013

• 當(dāng)前版本：2.3

• 人氣：GitHub上有40134顆星

• 描述：“基于自然語言有益原則的UI組件框架”

• 核心概念/原則：語義，tag ambivalence，可響應(yīng)

• 框架大小：806 KB

• 預(yù)處理器：少

• 響應(yīng)：是的

• 模塊化：是的

• 開始模板/布局：是的，提供了一些基本的初學(xué)者模板

• 圖標(biāo)集：Font Awesome

• 附加功能/附加組件：否

• 獨(dú)特的組件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape

• 文檔：非常好，提供組織良好的文檔，另外還有一個單獨(dú)的網(wǎng)站，提供入門指南，自定義和創(chuàng)建主題

• 定制：沒有GUI定制器，只有手動定制

• 瀏覽器支持：Firefox，Chrome，Safari，IE10 +（IE9僅支持瀏覽器前綴），Android 4，Blackberry 10

• 許可證：MIT

關(guān)于Semantic UI的注意事項(xiàng)

Semantic是極具創(chuàng)新性和功能全面的前端框架。其框架的總體結(jié)構(gòu)、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架。

4.Pure

Pure是一個輕量級的模塊化框架，用純CSS編寫，包含可根據(jù)需要一起使用或分開使用的組件。

• 創(chuàng)作者：雅虎

• 發(fā)布：2013

• 當(dāng)前版本：1.0.0

• 人氣：GitHub上有18375顆星

• 說明：“一套小而靈活的CSS模塊，能夠在每個Web項(xiàng)目中使用。”

• 核心概念/原則：SMACSS，極簡主義

• 框架大小：3.8 KB縮小和gzipped

• 預(yù)處理器：無

• 響應(yīng)：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標(biāo)集：無；可以改用Font Awesome

• 附加功能/附加組件：無

• 獨(dú)特的組件：無

• 文檔：很好

• 定制：基本的GUI皮膚生成器

• 瀏覽器支持：Firefox，Chrome，Safari的最新版本; IE7 +; iOS 6.x，7.x; Android 4.x

• 許可證：Yahoo! Inc. BSD

關(guān)于Pure的注意事項(xiàng)

Pure只為你的項(xiàng)目提供純粹的開始式樣。對于那些不需要全功能框架，但只有特定組件才能包含在其工作中的用戶來說，它是理想之選。

5.UIkit

UIkit是一個易于使用且易于定制的組件的簡明集合。雖然它不如以上框架那么受歡迎，但它提供了相同的功能和質(zhì)量。

• 創(chuàng)建者：YOOtheme

• 發(fā)布：2013

• 當(dāng)前版本：3.0.0

• 人氣：GitHub上有11954顆星

• 描述：“用于開發(fā)快速而強(qiáng)大的Web界面的輕量級和模塊化前端框架”

• 核心概念/原則：RWD，首先移動

• 框架大小：326.9 KB（壓縮文件夾）

• 預(yù)處理器：少，Sass

• 響應(yīng)：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標(biāo)集：UIkit帶有自己的SVG圖標(biāo)系統(tǒng)和庫，其中包含越來越多的輪廓圖標(biāo)

• 附加功能/附加組件：是的

• 獨(dú)特的組件：文章，Flex, Cover, HTML編輯器

• 文檔：很好

• 自定義：高級GUI定制程序僅在版本2（以前的版本）中可用

• 瀏覽器支持：Chrome，Firefox，Safari，IE9 +

• 許可證：MIT

關(guān)于UIkit的注意事項(xiàng)

UIkit已成功用于許多WordPress主題。它提供了一個靈活而強(qiáng)大的手動定制機(jī)制。（該框架的早期版本還提供了高級GUI定制工具。）

總結(jié)

以上是生活随笔為你收集整理的2018年五大最佳前端框架比较，程序员会怎么选？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。