[[331821]]

【51CTO.com快譯】

對于任何前端開發人員而言，他們通常只關心兩類問題：第一個是時間與效率，另一個是瀏覽器的兼容性測試問題。為了解決這兩類問題，我們需要采用一種合適的網頁設計方法，以實現在節省時間和提高效率的基礎上，改善用戶的使用體驗。而CSS正是此類方法中的一種。

作為Web設計工具，CSS(Cascading Style Sheets，層疊樣式表)可以將文檔的內容與文檔的表示相分離，從而大幅減少文件的傳輸體積。與此同時，您對網站CSS樣式表的任何更改，都會自動反映在所有頁面上。因此，CSS不但提供了出色的設計一致性，而且提供了多種格式的選項。

既然CSS對于開發人員和用戶都十分有益，那么我們該如何選擇CSS框架呢?下面，我將詳細地給您介紹目前最佳的11種CSS框架。

1、Bootstrap

作為最受歡迎的工具之一，Bootstrap在Web開發人員眼中已成為了業界領先的前端框架。為了使Web開發人員能夠構建出不同的用戶界面組件，Bootstrap能夠將CSS、Javascript和HTML代碼組合到一起。

Bootstrap 4是該框架的最新版本，它帶有更新的組件，更好的樣式表，并且能夠讓網頁和CSS中的圖像具有更快的響應能力。此外，Bootstrap 4也支持LESS(Leaner Style Sheets)和SASS(Syntactically Awesome Stylesheets)。

通常，Bootstrap能夠以可重用組件的形式，提供包括：導航欄、下拉菜單、分頁、以及標簽等常見的HTML元素。您可以輕松地將它們合并到既有的網頁設計中，而不必從頭開始。

Bootstrap CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名榜首。
• 有45%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有14萬顆星、68.7萬個fork、以及1115個貢獻者。

選擇Bootstrap CSS框架的理由

1.省時

您無需成為專業的程序員，便可使用Bootstrap來開發網站。通過其前端框架的全面文檔，以及內置的即用型組件，您可以更快地開發目標網站，以騰出時間來分析其他方面的復雜性。

2.防止出現瀏覽器的兼容性問題

跨瀏覽器測試對于在不同設備上運行和驗證目標網站的性能，是至關重要的。Bootstrap 4.0能夠與所有最新的瀏覽器相兼容，并確保網站元素沒有任何兼容性方面的問題。

3.維護良好的代碼庫

隨著Bootstrap越來越受歡迎，其維護團隊也在不斷地對其進行更新。同時，他們也會持續對各種技術和瀏覽器進行測試。

4.更好的一致性和團隊合作精神

由于Bootstrap的最終結果需要在所有的瀏覽器和平臺上看起來相一致，因此一旦在設計團隊或開發團隊中有新的成員加入時，其相關的文檔能夠方便新成員輕松地了解前端框架的所有知識，進而促進公司內部更好的團隊合作。

5.學習曲線平緩

就學習曲線而言，初學者可以憑借著大量的可用文檔，很容易地上手Bootstrap。在學習的過程中，他們也能夠很快地發現困難的所在。

Bootstrap CSS框架的有待改進之處

1.較慢的加載時間

Bootstrap會生成大量的文件，這可能會影響到網站的加載速度和時間。為此，您必須手動刪除一些內容。

2.“千站一面”

除非您自定義了各種樣式，否則為了簡化起見，Bootstrap會導致各個網站都看上去極其相似。

知名客戶

Twitter、Spotify、Intel、Walmart、Udemy、Mint。

2、 Foundation

ZURB于2011年9月設計出了Foundation。與其他CSS框架相比，Foundation不但擁有先進而復雜的界面，而且提供了響應式菜單，以及與各種設備和瀏覽器的兼容性。您還可以使用CSS框架，來輕松地按需設置各種菜單樣式。

得益于超響應式(super-responsive)CSS框架，設計人員可以遵循“自行設計網站(design-the-site-yourself)”的方法，以擁有對項目的更大控制權。

Foundation CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第二。
• 有14.1%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有2.8萬顆星、5.8千個fork、以及984個貢獻者。

選擇Foundation CSS框架的理由

1.更獨特

Foundation使您可以自定義與其他網站不同外觀的站點。

2.減少CSS膨脹(Bloat)

由于它內置了基本的CSS外觀，因此大幅減少了HTML中的CSS膨脹。

3.更好的網格靈活性

您可以借助“折疊(collapse)”類，輕松地刪除gutters和折疊列。您還可以在block-sized網格的幫助下，靈活地創建相等大小的列。

4.小部件

Foundation可以輕松地將網站導航放置在側邊，以將其隱藏。同時，您還能獲得一個HTML5的表單驗證庫，一個基于訂閱產品價格的顯示表，以及根據不同設備自定義出用戶體驗的選項。

Foundation CSS框架的有待改進之處

1.耗時

初學者很難上手Foundation CSS框架，其學習過程也會比較耗時。

2.妥協的支持

雖然擁有社區支持、質量檢查、以及相關論壇，但是它提供給開發人員前端框架并不豐富。

3.可定制的復雜性

與許多其他CSS框架相比，開發人員可以自定義復雜的網站。

知名客戶

EA、Amazon、eBay、Adobe、Mozilla。

3. Materialize CSS

以Google為基礎的Materialize CSS融合了JavaScript、CSS和HTML等各種組件。它不但具有一定的響應能力，而且存在較少的瀏覽器兼容性問題。如果您希望構建一個優雅的UI，那么Materialize就可以通過大量的自定義CSS，以及多種配色方案，來幫助您完成獨特的網站設計。

Materialize CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第三。
• 有17.1%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有3.7萬顆星、4.8千個fork、以及250個貢獻者。

選擇Materialize CSS框架的理由

1.多種內置功能

Materialize的內置功能包括：視差元素、各種卡片、流文本、可懸停的項目及對象等。

2.減少編碼的時間

由于其大多數功能都易于使用，因此Materialize大幅減少了開發人員的編碼時間。

3.超棒的插件選擇

可折疊的對話框、下拉菜單、多媒體、模態(Modals)、以及視差(Parallax)等都是Materialize提供的免費JavaScript插件。開發人員可以輕松地使用它們來改善目標網站的用戶界面。

4.易用性

Materialize不但帶有清晰的文檔，其特定的代碼實例也可以進一步幫助您了解前端的框架。

Materialize CSS框架的有待改進之處

1.復雜的JavaScript組件

Materialize CSS框架的JavaScript組件對于新手而言，有一定的難度。

2.支持不夠

對于Materialise的支持社區并不太成熟。

知名客戶

WPArena、Digital Services、GameRaven、DroneDeploy。

4.Semantic UI

作為一名全棧開發人員，Jack Lukic使用自然語言原理創建了Semantic UI框架。憑借著jQuery和LESS功能，Semantic UI提供了光滑、平整且精細的外觀，以及輕量級的用戶體驗。它的社區雖然相對較小，但是其成員既熱情又忠誠。他們的目標是創建一種共享的UI語言，以賦予開發人員和設計人員同樣的權利。目前，Semantic UI社區已經擁有約3000多個主題。

Semantic UI CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第四。
• 有9.2%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有4.7萬顆星、5千個fork、以及190個貢獻者。

選擇Semantic UI CSS框架的理由

1.簡單易用

Semantic UI的最大好處是非常易用。您只需鍵入需要的內容，就能夠輕松地將其合并到目標網站的設計中。

2.大量可用的主題

布局的多樣性是Semantic UI的另一個優勢。通過不同的主題，您可以輕松地為各種項目找到必要的組件。

3.頁面設計用時少

由于Semantic UI類在命名上清晰易懂，因此開發人員不但節省了學習的時間，也讓手頭上項目的開發更快、更直觀。

Semantic UI CSS框架的有待改進之處

1.瀏覽器兼容性測試問題

由于Semantic UI不支持IE 7，因此其瀏覽器的兼容性并不理想，而且在兼容性測試中可能會造成一定的缺陷。

2.更新緩慢

相比其他前端框架的頻繁更新，Semantic UI在2018-2019年度已經一年沒有更新了。

3.反應遲鈍

在某些設備上運行其開發的網站時，響應能力可能并不佳。

知名客戶

Snapchat、Accenture、Kmong、Samsviran、Ristoranti。

5、 Bulma

作為一個基于Flexbox的開源框架，Bulma在全世界擁有超過20萬名開發用戶。它可以通過可視化的組件，讓開發人員了解其運作的過程。該前端框架通過各種技術，為前端開發人員提供了一種內聚(cohesive)的界面。此外，由于它使用了響應式模板，因此我們可以更好地專注于網站的內容，而不是代碼的編寫。

Bulma CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第五。
• 有10%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有3.9萬顆星、3.3千個fork、以及303個貢獻者。

選擇Bulma CSS框架的理由

1.創新且簡易的設計

Bulma方便了開發人員更加輕松地創建和自定義各類應用。其集成式的Flexbox響應能力使得前端開發人員能夠構建出獨特的設計。

2.詳盡的文檔

Bulma帶有詳盡的文檔，可幫助開發人員輕松地開展他們的項目，并獲得對應的支持。

3.多功能性

Bulma能夠提供排版、表格、按鈕、表格等組件。這些有助于保障框架的堅實基礎和高度通用性。此外，它還包含了諸如垂直對齊、布局和不同媒體對象的組件方案。

Bulma CSS框架的有待改進之處

1.在IE上比較慢

即使在瀏覽器兼容性測試中未出現任何問題，該CSS框架在IE上的運行速度也比較慢。

2.小眾社區

由于相對較新，因此Bulma的社區并不像Bootstrap等框架那么活躍。

知名客戶

Django、Rubrik、XICA magellan、Tam Development、Awesome Stacks、WordPress。

6、 UIKit

UIKit是一個模塊化的輕量級前端CSS框架。它非常適合于快速開發那些功能強大的Web界面。憑借著CSS、HTML和JS組件的全面集合，它能夠讓前端框架既容易擴展，又方便被定制使用。UIKit是用于開發iOS應用最廣泛的前端框架之一。它定義了諸如：按鈕、標簽、導航控制器和表格視圖等核心組件。

UIKit CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第六。
• 有3.27%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有1.5萬顆星、2.2千個fork、以及28個貢獻者。

選擇UIKit CSS框架的理由

1.清晰的架構

UIKit具有明確定義的規則和簡潔的代碼。

2.現成可用的主題

您可以從網站的下拉菜單中選擇所需的主題，并下載其對應的LESS CSS或SASS文件。

3.模塊化

UIKit的全面設計可以使設計人員輕松地選擇不同的組件，以將其添加到樣式表中。由于前端框架的模塊化程度較高，因此它的加入并不會破壞網站的整體風格。

4.高度可定制性

憑借著UIKit的高度可定制性，設計人員可以輕松地創建出全新的外觀。其內置的動畫功能也增加了網站的趣味性。

UIKit框架的有待改進之處

1.缺乏可學習的資源

由于該前端框架缺乏一定的普及性，因此用戶很難找到額外的學習資源。所有開發人員都必須依賴其官方的文檔。

2.封閉而緩慢的開發

UIKit的開發周期較長，而且其修復錯誤的過程也比較耗時。此外，由于其開發是在內部進行的，因此用戶無法公開地獲取相關信息。

3.復雜的代碼類

其嵌套的類不但難以閱讀，并且可能無法獲得預期的結果。

知名客戶

LiteTube、AskNicely、Crunchyroll、SolarWinds、Nedwave。

7. PureCSS

由Yahoo開發的PureCSS，提供了一組體積小、且具有快速響應能力的CSS模塊。它非常適合開發那些界面美觀且功能不同的項目。PureCSS具有快速響應能力的內置設計，以及最小體積的標準化CSS，而且它們都是免費的!

PureCSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第七。
• 有5.44%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有2萬顆星、2.1千個fork、以及59個貢獻者。

選擇PureCSS框架的理由

1.可簡單定制

該前端框架讓設計人員可以自定義，并能夠構建出他們喜歡的設計風格。

2.瀏覽器兼容性測試

得益于Normalize.css，PureCSS在多個瀏覽器兼容性測試中，基本不會出現任何問題。

3.可擴展性

由于設計人員可以輕松地添加新的CSS規則，而不會覆蓋現有的CSS規則，因此他們可以根據實際項目來自定義外觀。

4.輕巧與響應能力

它的gzip文件只有4.5KB，顯然非常輕巧。由于PureCSS帶有12列的移動優先的流體格(mobile-first fluid grid)，可以支持不同尺寸屏幕的響應，因此由它創建的網站，可以根據用戶的設備，靈活地顯示頁面。

PureCSS框架的有待改進之處

1.不太適合初學者

PureCSS并不能提供多種獨特的樣式，也未能提供自定義的服務，因此它不太適合初學者。

知名客戶

SkyQuest Tech Stack、Hacktoolkit、PodcastParty、Wizters、Choobs Ltd。

8、Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地構建UI。作為一個utility-based的CSS庫，它比那些語義和精益標記(lean markup)更注重實用性和速度。在創建網站時，您只需要確定項目的范圍，而無需自行編寫CSS。雖然Tailwind并不提供默認的主題，您也找不到任何內置的UI組件，但是您可以使用預設計的部件菜單，來構建目標網站。

Tailwind CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第八。
• 有4.9%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有69顆星、13個fork、以及2個貢獻者。

選擇Tailwind CSS框架的理由

1.網站不會受到個別更改的影響

某個元素的更改并不會影響到與之相關的其他元素。

2.易于使用

一旦熟悉了語法，您可以輕松地使用Tailwind，而且不必在樣式表和HTML之間來回切換。

3.高度可定制性

它帶有許多自定義的選項，而且不會預設網站的外觀。

4.更快速的開發

由于Tailwind省略了編寫CSS的必須步驟，因此其開發速度得以大幅提升。

Tailwind CSS框架的有待改進之處

1.對CSS專家的吸引力不夠

該前端框架對于剛入行的開發人員來說，比較容易上手，但是對于資深的CSS開發人員，則不太有吸引力。

2.不支持網格布局(Grid Layout)

即使在12列布局下，Tailwind也不支持網格布局。

知名客戶

BlaBlaCar、otto-now、Website、Clarisights、JetThoughts、EXR。

9. Ant Design

由阿里巴巴開發的Ant Design是一種Javascript庫類型的ReactJS組件庫。通過將屏幕區域分為24列網格，它增加了用戶對于可見區域的自定義能力。同時，它通過各種填充(filled)和輪廓(outlined)圖標，來滿足不同的應用程序的要求。

Ant Design CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第九。
• 有4.39%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有6.9萬顆星、2.1千個fork、以及1085個貢獻者。

選擇Ant Design CSS框架的理由

1.支持表單組件

開發人員可以為FormItem添加TextArea、Input、Radio、Checkbox、Date或TimePicker。

2.出色的反饋組件

它可以為用戶的各項操作提供即時的通知。

3.企業級的網站外觀

Ant Design能夠為開發人員提供企業級的網站外觀。

4.輔助功能

它符合ARIA規范，并提供鍵盤處理和制表等功能。

5.節省時間

其原型制作方式可以節省大量的開發時間。

Ant Design CSS框架的有待改進之處

1.缺乏英文版文檔

原始文檔僅提供中文版，當然其社區提供了良好的翻譯服務。

知名客戶

螞蟻金服、阿里、騰訊、百度、口碑、美團。

10、 Tachyons

與其他流行的前端框架不同，Tachyons旨在將CSS規則分解為小型的、可管理的、以及可復用的部件。Tachyons可以幫助開發人員創建出具有高度可讀性、能夠快速加載和響應的網站，而且無需使用大量CSS代碼。

Tachyons CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第十。
• 有4.13%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有9.7萬顆星、611個fork、以及64個貢獻者。

選擇Tachyons CSS框架的理由

1.容易上手

由于沒有陡峭的學習曲線，因此初學者可以輕松地學習和使用它。

2.完全可定制

Tachyons包含了大量可定制的CSS模塊。由于其模塊內沒有復雜的依賴關系，因此開發人員易于進行定制。

3.不強制遵守默認樣式

由于不同的類在不同的屏幕尺寸上具有相應的變體，因此開發人員可以控制頁面的布局，而不必拘泥于默認的樣式。

4.快速原型

由于只需藥很少的設計便可展示出網站的效果，因此Tachyons非常適合于原型的制作。

5.良好的文檔

Tachyons的文檔不但結構合理，而且易于被開發人員所理解。

Tachyons CSS框架的有待改進之處

1.缺乏創新力

其默認設置不足以讓用戶創建出具有獨特外觀的網站。

2.拖慢開發的進程

Tachyons復雜的類名稱和結構，可能會拖慢開發的進程。

知名客戶

Everlane、CrewFire、Agema、guac.live。

11、Primer

得益于全球最大的開發商社區—Github，Primer采用系統級方法，來確保諸如：版式、間距和顏色等樣式的一致性。因此，Primer不但框架簡單，而且能夠給用戶來帶一致性的體驗。

Primer CSS框架的使用情況統計

• 在State of CSS的調查中，它位居2020年最佳CSS框架類別排名第十一。
• 有0.62%的CSS開發人員已經在使用，并希望繼續使用它。
• 在Github上擁有9.2萬顆星、1.5萬個fork、以及77個貢獻者。

選擇Primer CSS框架的理由

1.可自定義的樣式

Primer提供了各種大小與粗細的字體樣式。據此，開發人員可以通過創建樣式，來增強網站的可讀性和吸引力。

2.絕佳的配色方案

通過提供了絕佳的配色方案，Primer能夠增加內容的表現力。其顏色工具和變量也能夠為開發人員提供各種主題的樣式選項，而不必與某個特定的結構捆綁在一起。

3.可組合的間距比例

它提供的可組合式base-8間距，能夠與Github的內容緊密配合。其填充間隔和邊距可以確保水平和垂直方向的一致性。

Prime CSS框架的有待改進之處

1.缺乏人氣和評論

Primer不如同類其他產品那樣受歡迎。由于很少有用戶使用過該CSS框架，因此也就沒有足夠的評論，來幫助新用戶下定嘗試的決心。

2.社區支持不夠

由于Primer的用戶群很小，因此其社區支持力度不足。

知名客戶

My Stack、timelog、g59 Ranking、Complete Toolset。

總結

我在上面提到的11種CSS框架各有優缺點。您可以根據實際項目的需求，進行選擇。當然請先通過測試，確保您采用的框架不會出現任何CSS或HTML的瀏覽器兼容性問題。

原標題：11 Best CSS Frameworks To Look Forward In 2020 ，作者: Veethee Dixit

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】