[[331821]]

【51CTO.com快譯】

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

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

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

1、Bootstrap

作為最受歡迎的工具之一，Bootstrap在Web開發(fā)人員眼中已成為了業(yè)界領(lǐng)先的前端框架。為了使Web開發(fā)人員能夠構(gòu)建出不同的用戶界面組件，Bootstrap能夠?qū)SS、Javascript和HTML代碼組合到一起。

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

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

Bootstrap CSS框架的使用情況統(tǒng)計

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

選擇Bootstrap CSS框架的理由

1.省時

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

2.防止出現(xiàn)瀏覽器的兼容性問題

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

3.維護良好的代碼庫

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

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

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

5.學習曲線平緩

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

Bootstrap CSS框架的有待改進之處

1.較慢的加載時間

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

2.“千站一面”

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

知名客戶

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

2、 Foundation

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

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

Foundation CSS框架的使用情況統(tǒng)計

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

選擇Foundation CSS框架的理由

1.更獨特

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

2.減少CSS膨脹(Bloat)

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

3.更好的網(wǎng)格靈活性

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

4.小部件

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

Foundation CSS框架的有待改進之處

1.耗時

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

2.妥協(xié)的支持

雖然擁有社區(qū)支持、質(zhì)量檢查、以及相關(guān)論壇，但是它提供給開發(fā)人員前端框架并不豐富。

3.可定制的復雜性

與許多其他CSS框架相比，開發(fā)人員可以自定義復雜的網(wǎng)站。

知名客戶

EA、Amazon、eBay、Adobe、Mozilla。

3. Materialize CSS

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

Materialize CSS框架的使用情況統(tǒng)計

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

選擇Materialize CSS框架的理由

1.多種內(nèi)置功能

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

2.減少編碼的時間

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

3.超棒的插件選擇

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

4.易用性

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

Materialize CSS框架的有待改進之處

1.復雜的JavaScript組件

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

2.支持不夠

對于Materialise的支持社區(qū)并不太成熟。

知名客戶

WPArena、Digital Services、GameRaven、DroneDeploy。

4.Semantic UI

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

Semantic UI CSS框架的使用情況統(tǒng)計

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

選擇Semantic UI CSS框架的理由

1.簡單易用

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

2.大量可用的主題

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

3.頁面設(shè)計用時少

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

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

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

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

2.更新緩慢

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

3.反應(yīng)遲鈍

在某些設(shè)備上運行其開發(fā)的網(wǎng)站時，響應(yīng)能力可能并不佳。

知名客戶

Snapchat、Accenture、Kmong、Samsviran、Ristoranti。

5、 Bulma

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

Bulma CSS框架的使用情況統(tǒng)計

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

選擇Bulma CSS框架的理由

1.創(chuàng)新且簡易的設(shè)計

Bulma方便了開發(fā)人員更加輕松地創(chuàng)建和自定義各類應(yīng)用。其集成式的Flexbox響應(yīng)能力使得前端開發(fā)人員能夠構(gòu)建出獨特的設(shè)計。

2.詳盡的文檔

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

3.多功能性

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

Bulma CSS框架的有待改進之處

1.在IE上比較慢

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

2.小眾社區(qū)

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

知名客戶

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

6、 UIKit

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

UIKit CSS框架的使用情況統(tǒng)計

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

選擇UIKit CSS框架的理由

1.清晰的架構(gòu)

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

2.現(xiàn)成可用的主題

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

3.模塊化

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

4.高度可定制性

憑借著UIKit的高度可定制性，設(shè)計人員可以輕松地創(chuàng)建出全新的外觀。其內(nèi)置的動畫功能也增加了網(wǎng)站的趣味性。

UIKit框架的有待改進之處

1.缺乏可學習的資源

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

2.封閉而緩慢的開發(fā)

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

3.復雜的代碼類

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

知名客戶

LiteTube、AskNicely、Crunchyroll、SolarWinds、Nedwave。

7. PureCSS

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

PureCSS框架的使用情況統(tǒng)計

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

選擇PureCSS框架的理由

1.可簡單定制

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

2.瀏覽器兼容性測試

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

3.可擴展性

由于設(shè)計人員可以輕松地添加新的CSS規(guī)則，而不會覆蓋現(xiàn)有的CSS規(guī)則，因此他們可以根據(jù)實際項目來自定義外觀。

4.輕巧與響應(yīng)能力

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

PureCSS框架的有待改進之處

1.不太適合初學者

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

知名客戶

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

8、Tailwind

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

Tailwind CSS框架的使用情況統(tǒng)計

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

選擇Tailwind CSS框架的理由

1.網(wǎng)站不會受到個別更改的影響

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

2.易于使用

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

3.高度可定制性

它帶有許多自定義的選項，而且不會預設(shè)網(wǎng)站的外觀。

4.更快速的開發(fā)

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

Tailwind CSS框架的有待改進之處

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

該前端框架對于剛?cè)胄械拈_發(fā)人員來說，比較容易上手，但是對于資深的CSS開發(fā)人員，則不太有吸引力。

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

即使在12列布局下，Tailwind也不支持網(wǎng)格布局。

知名客戶

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

9. Ant Design

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

Ant Design CSS框架的使用情況統(tǒng)計

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

選擇Ant Design CSS框架的理由

1.支持表單組件

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

2.出色的反饋組件

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

3.企業(yè)級的網(wǎng)站外觀

Ant Design能夠為開發(fā)人員提供企業(yè)級的網(wǎng)站外觀。

4.輔助功能

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

5.節(jié)省時間

其原型制作方式可以節(jié)省大量的開發(fā)時間。

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

1.缺乏英文版文檔

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

知名客戶

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

10、 Tachyons

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

Tachyons CSS框架的使用情況統(tǒng)計

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

選擇Tachyons CSS框架的理由

1.容易上手

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

2.完全可定制

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

3.不強制遵守默認樣式

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

4.快速原型

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

5.良好的文檔

Tachyons的文檔不但結(jié)構(gòu)合理，而且易于被開發(fā)人員所理解。

Tachyons CSS框架的有待改進之處

1.缺乏創(chuàng)新力

其默認設(shè)置不足以讓用戶創(chuàng)建出具有獨特外觀的網(wǎng)站。

2.拖慢開發(fā)的進程

Tachyons復雜的類名稱和結(jié)構(gòu)，可能會拖慢開發(fā)的進程。

知名客戶

Everlane、CrewFire、Agema、guac.live。

11、Primer

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

Primer CSS框架的使用情況統(tǒng)計

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

選擇Primer CSS框架的理由

1.可自定義的樣式

Primer提供了各種大小與粗細的字體樣式。據(jù)此，開發(fā)人員可以通過創(chuàng)建樣式，來增強網(wǎng)站的可讀性和吸引力。

2.絕佳的配色方案

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

3.可組合的間距比例

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

Prime CSS框架的有待改進之處

1.缺乏人氣和評論

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

2.社區(qū)支持不夠

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

知名客戶

My Stack、timelog、g59 Ranking、Complete Toolset。

總結(jié)

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

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

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