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

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

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

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

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

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

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

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

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

• 框架是否提供了良好的文檔？為了促進學習過程，始終需要良好的文檔。

• 什么是框架的特異性水平？這里的主要觀點是，與具有高級特異性的框架相比，更通用的框架更容易處理。在大多數情況下，最好選擇應用最少樣式的框架，因為定制要容易得多。與覆蓋或覆蓋現有的CSS規則相比，添加新的CSS規則更為方便和有效。此外，如果你在現有規則的基礎上添加新規則，則最終會出現未使用的規則，這會不必要地增加CSS的大小。

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

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

1.Bootstrap

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

• 創作者：Mark Otto and Jacob Thornton.

• 發布時間：2011年

• 當前版本：4.0

• 人氣：GitHub上有122825顆星

• 描述：“簡潔，直觀且功能強大的前端框架，可實現更快、更輕松的網頁開發。”

• 核心概念/原則：RWD和移動優先。

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

• 預處理器：Sass

• 響應：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標集：不包括

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

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

• 文檔：非常好

• 定制：為網格系統和重啟提供獨立文件選項，使用Sass輕松定制；沒有在線定制器

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

• 許可證：MIT

Bootstrap的注意事項

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

2.Foundation

Foundation是頂部前端框架的第二大玩家。有了像ZURB這樣堅實的后盾，這個框架有了一個真正強大的基礎。畢竟，Foundation在包括Facebook，Mozilla，易趣，雅虎在內的許多大型網站上使用，還有國家地理等等。

• 創作者：ZURB

• 發布時間：2011年

• 當前版本：6

• 人氣：GitHub上有27130顆星

• 描述：“先進的響應式前端框架”

• 核心概念/原則：RWD，移動優先，語義

• 框架大小：197.5 KB

• 預處理器：Sass

• 響應：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標集：基礎圖標字體

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

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

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

• 定制：基本的GUI定制器

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

• 許可證：MIT

Foundation注意事項

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

3.Semantic UI

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

• 創作者：Jack Lukic

• 發布：2013

• 當前版本：2.3

• 人氣：GitHub上有40134顆星

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

• 核心概念/原則：語義，tag ambivalence，可響應

• 框架大小：806 KB

• 預處理器：少

• 響應：是的

• 模塊化：是的

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

• 圖標集：Font Awesome

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

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

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

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

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

• 許可證：MIT

關于Semantic UI的注意事項

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

4.Pure

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

• 創作者：雅虎

• 發布：2013

• 當前版本：1.0.0

• 人氣：GitHub上有18375顆星

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

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

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

• 預處理器：無

• 響應：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標集：無；可以改用Font Awesome

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

• 獨特的組件：無

• 文檔：很好

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

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

• 許可證：Yahoo! Inc. BSD

關于Pure的注意事項

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

5.UIkit

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

• 創建者：YOOtheme

• 發布：2013

• 當前版本：3.0.0

• 人氣：GitHub上有11954顆星

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

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

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

• 預處理器：少，Sass

• 響應：是的

• 模塊化：是的

• 啟動模板/布局：是的

• 圖標集：UIkit帶有自己的SVG圖標系統和庫，其中包含越來越多的輪廓圖標

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

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

• 文檔：很好

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

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

• 許可證：MIT

關于UIkit的注意事項

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。