[[331821]]

【51CTO.com快譯】

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

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

既然CSS對(duì)于開(kāi)發(fā)人員和用戶(hù)都十分有益，那么我們?cè)撊绾芜x擇CSS框架呢?下面，我將詳細(xì)地給您介紹目前最佳的11種CSS框架。

1、Bootstrap

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

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

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

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

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

選擇Bootstrap CSS框架的理由

1.省時(shí)

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

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

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

3.維護(hù)良好的代碼庫(kù)

隨著B(niǎo)ootstrap越來(lái)越受歡迎，其維護(hù)團(tuán)隊(duì)也在不斷地對(duì)其進(jìn)行更新。同時(shí)，他們也會(huì)持續(xù)對(duì)各種技術(shù)和瀏覽器進(jìn)行測(cè)試。

4.更好的一致性和團(tuán)隊(duì)合作精神

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

5.學(xué)習(xí)曲線(xiàn)平緩

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

Bootstrap CSS框架的有待改進(jìn)之處

1.較慢的加載時(shí)間

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

2.“千站一面”

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

知名客戶(hù)

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

2、 Foundation

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

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

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

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

選擇Foundation CSS框架的理由

1.更獨(dú)特

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

2.減少CSS膨脹(Bloat)

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

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

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

4.小部件

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

Foundation CSS框架的有待改進(jìn)之處

1.耗時(shí)

初學(xué)者很難上手Foundation CSS框架，其學(xué)習(xí)過(guò)程也會(huì)比較耗時(shí)。

2.妥協(xié)的支持

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

3.可定制的復(fù)雜性

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

知名客戶(hù)

EA、Amazon、eBay、Adobe、Mozilla。

3. Materialize CSS

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

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

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

選擇Materialize CSS框架的理由

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

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

2.減少編碼的時(shí)間

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

3.超棒的插件選擇

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

4.易用性

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

Materialize CSS框架的有待改進(jìn)之處

1.復(fù)雜的JavaScript組件

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

2.支持不夠

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

知名客戶(hù)

WPArena、Digital Services、GameRaven、DroneDeploy。

4.Semantic UI

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

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

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

選擇Semantic UI CSS框架的理由

1.簡(jiǎn)單易用

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

2.大量可用的主題

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

3.頁(yè)面設(shè)計(jì)用時(shí)少

由于Semantic UI類(lèi)在命名上清晰易懂，因此開(kāi)發(fā)人員不但節(jié)省了學(xué)習(xí)的時(shí)間，也讓手頭上項(xiàng)目的開(kāi)發(fā)更快、更直觀(guān)。

Semantic UI CSS框架的有待改進(jìn)之處

1.瀏覽器兼容性測(cè)試問(wèn)題

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

2.更新緩慢

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

3.反應(yīng)遲鈍

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

知名客戶(hù)

Snapchat、Accenture、Kmong、Samsviran、Ristoranti。

5、 Bulma

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

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

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

選擇Bulma CSS框架的理由

1.創(chuàng)新且簡(jiǎn)易的設(shè)計(jì)

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

2.詳盡的文檔

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

3.多功能性

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

Bulma CSS框架的有待改進(jìn)之處

1.在IE上比較慢

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

2.小眾社區(qū)

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

知名客戶(hù)

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

6、 UIKit

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

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

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

選擇UIKit CSS框架的理由

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

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

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

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

3.模塊化

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

4.高度可定制性

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

UIKit框架的有待改進(jìn)之處

1.缺乏可學(xué)習(xí)的資源

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

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

UIKit的開(kāi)發(fā)周期較長(zhǎng)，而且其修復(fù)錯(cuò)誤的過(guò)程也比較耗時(shí)。此外，由于其開(kāi)發(fā)是在內(nèi)部進(jìn)行的，因此用戶(hù)無(wú)法公開(kāi)地獲取相關(guān)信息。

3.復(fù)雜的代碼類(lèi)

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

知名客戶(hù)

LiteTube、AskNicely、Crunchyroll、SolarWinds、Nedwave。

7. PureCSS

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

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

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

選擇PureCSS框架的理由

1.可簡(jiǎn)單定制

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

2.瀏覽器兼容性測(cè)試

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

3.可擴(kuò)展性

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

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

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

PureCSS框架的有待改進(jìn)之處

1.不太適合初學(xué)者

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

知名客戶(hù)

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

8、Tailwind

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

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

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

選擇Tailwind CSS框架的理由

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

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

2.易于使用

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

3.高度可定制性

它帶有許多自定義的選項(xiàng)，而且不會(huì)預(yù)設(shè)網(wǎng)站的外觀(guān)。

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

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

Tailwind CSS框架的有待改進(jìn)之處

1.對(duì)CSS專(zhuān)家的吸引力不夠

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

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

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

知名客戶(hù)

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

9. Ant Design

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

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

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

選擇Ant Design CSS框架的理由

1.支持表單組件

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

2.出色的反饋組件

它可以為用戶(hù)的各項(xiàng)操作提供即時(shí)的通知。

3.企業(yè)級(jí)的網(wǎng)站外觀(guān)

Ant Design能夠?yàn)殚_(kāi)發(fā)人員提供企業(yè)級(jí)的網(wǎng)站外觀(guān)。

4.輔助功能

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

5.節(jié)省時(shí)間

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

Ant Design CSS框架的有待改進(jìn)之處

1.缺乏英文版文檔

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

知名客戶(hù)

螞蟻金服、阿里、騰訊、百度、口碑、美團(tuán)。

10、 Tachyons

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

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

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

選擇Tachyons CSS框架的理由

1.容易上手

由于沒(méi)有陡峭的學(xué)習(xí)曲線(xiàn)，因此初學(xué)者可以輕松地學(xué)習(xí)和使用它。

2.完全可定制

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

3.不強(qiáng)制遵守默認(rèn)樣式

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

4.快速原型

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

5.良好的文檔

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

Tachyons CSS框架的有待改進(jìn)之處

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

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

2.拖慢開(kāi)發(fā)的進(jìn)程

Tachyons復(fù)雜的類(lèi)名稱(chēng)和結(jié)構(gòu)，可能會(huì)拖慢開(kāi)發(fā)的進(jìn)程。

知名客戶(hù)

Everlane、CrewFire、Agema、guac.live。

11、Primer

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

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

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

選擇Primer CSS框架的理由

1.可自定義的樣式

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

2.絕佳的配色方案

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

3.可組合的間距比例

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

Prime CSS框架的有待改進(jìn)之處

1.缺乏人氣和評(píng)論

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

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

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

知名客戶(hù)

My Stack、timelog、g59 Ranking、Complete Toolset。

總結(jié)

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

原標(biāo)題：11 Best CSS Frameworks To Look Forward In 2020 ，作者: Veethee Dixit

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