十个最流行的前端 CSS 库案
前端css庫(kù)，可以幫助用戶(hù)分擔(dān)樣式設(shè)計(jì)，從而顯著提高原型制作速度；用戶(hù)則可以憑借前端框架，更加輕松地構(gòu)建起直觀的可用應(yīng)用程序。目前市場(chǎng)上存在大量前端框架可供選擇，本篇文章的主要內(nèi)容就是關(guān)于那些目前最為流行且常用的框架。
為什么要使用css庫(kù)，而不選擇自定義 CSS？簡(jiǎn)而言之，時(shí)間是一種寶貴的資源，我們不該把它浪費(fèi)在樣式的構(gòu)建身上。從零開(kāi)始構(gòu)建 CSS 是否性能好、效果佳？答案當(dāng)然是肯定的。但除非您是位身經(jīng)百戰(zhàn)的 CSS 視覺(jué)創(chuàng)意人士，否則把這項(xiàng)工作交給專(zhuān)家才是最好的選擇。
與此同時(shí)，框架則能夠更輕松地快速構(gòu)建起直觀的可用應(yīng)用程序。憑借著極高的人氣，目前市場(chǎng)上存在大量前端框架可供我們選擇。
Ant Design
項(xiàng)目概括
“Ant Design 能夠幫助每一位項(xiàng)目成員降低設(shè)計(jì)與原型設(shè)計(jì)工作的難度，同時(shí)提高后臺(tái)應(yīng)用程序與產(chǎn)品的開(kāi)發(fā)效率。”
——摘自 Ant Design 官網(wǎng)
Ant Design 是一種面向后臺(tái)應(yīng)用的設(shè)計(jì)語(yǔ)言，由 Ant UED 團(tuán)隊(duì)開(kāi)發(fā)而成。他們希望借此統(tǒng)一內(nèi)部后臺(tái)項(xiàng)目的用戶(hù)界面規(guī)范、減少設(shè)計(jì)差異以及不必要的實(shí)現(xiàn)成本，從而解放出更多可用于設(shè)計(jì)以及前端開(kāi)發(fā)的寶貴資源。
特性
一種面向 Web 應(yīng)用程序的企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言。
一套開(kāi)箱即用的高品質(zhì)react組件。
由 TypeScript 編寫(xiě)而成并擁有完整的定義類(lèi)型。
整套開(kāi)發(fā)與設(shè)計(jì)資源及工具。
環(huán)境支持
現(xiàn)代瀏覽器與 IE 9 以上版本（帶有 polyfills）。
服務(wù)器端渲染。
Electron
Foundation
項(xiàng)目概括
“Foundation 屬于一個(gè)完整的響應(yīng)式前端框架家族。利用 Foundation，您將可快速完成從原型到生產(chǎn)的整個(gè)流程，為任意目標(biāo)設(shè)備上的站點(diǎn)或應(yīng)用程序提供支持。Foundation 包含一套完全可定制的響應(yīng)式網(wǎng)格、一套龐大的 Sass Mixins 庫(kù)、各類(lèi)常用JavaScript插件以及完全可訪(fǎng)問(wèn)性支持。”——摘自 Foundation 官網(wǎng)
特性
a11y 友好性。
簡(jiǎn)約風(fēng)格。
靈活的 Sass。
ZURB 入門(mén)模板。
Bulma
項(xiàng)目概括
Bulma 是一套 CSS 框架，因此只會(huì)輸出單一 CSS 文件：bulma.css。
大家能夠以開(kāi)箱即用的方式使用以上文件，也可以下載 Saas 源以調(diào)用其中各項(xiàng)變量。
但其中不包括JavaScript，因?yàn)槿藗兺鶅A向于使用自己的js實(shí)現(xiàn)。Bulma 還具有環(huán)境中立性：僅屬于邏輯意義上的一種樣式層。
特性
通過(guò)使用最新 CSS3 功能（例如 Flexbox）并配合 CSS 變量與 CSS 網(wǎng)格，Bulma 一直處于瀏覽器視覺(jué)技術(shù)領(lǐng)域的最前沿。
簡(jiǎn)單的網(wǎng)格系統(tǒng)：要構(gòu)建 Bulma 網(wǎng)格，大家只需要一個(gè).columns 容器，并根據(jù)需求將任意數(shù)量的.column 條目打包進(jìn)去即可。
易于學(xué)習(xí)的語(yǔ)法：類(lèi)名稱(chēng)簡(jiǎn)單易讀（例如.button 或.title），修飾符便于上手（例如.is-primary 或者.is-large），您能夠在幾分鐘之內(nèi)輕松學(xué)會(huì)使用 Bulma。
超過(guò) 100 種實(shí)用 CSS 助手。
Spectre.css
項(xiàng)目概括
根據(jù)官方網(wǎng)站所言，Spectre.css 是“一套輕量化、響應(yīng)式的現(xiàn)代 CSS 框架，用于實(shí)現(xiàn)更快、可擴(kuò)展性更強(qiáng)的開(kāi)發(fā)能力。Spectre 提供多種排版與元素的基本樣式，基于 Flexbox 的響應(yīng)式布局機(jī)制，外加純 CSS 組件與工具程序。”
特性
輕量化（gzip 壓縮后約 10 KB）
美觀的組件與調(diào)色板。
直觀的語(yǔ)法。
靈活性：無(wú)需js。
Tailwind CSS
項(xiàng)目概括
“Tailwind CSS 是一款高度可定制的低級(jí) CSS 框架，能夠?yàn)槟峁?gòu)建定制化設(shè)計(jì)所需要的全部構(gòu)建單元，且您將徹底告別那些惱人的樣式問(wèn)題。”——摘自 Tailwind CSS 官網(wǎng)
特性
響應(yīng)式。
組件友好性。
可定制。
Shoelace
項(xiàng)目概括
“Shoelace.css 是一套輕量化且具有前瞻性的 CSS 庫(kù)，使用面向未來(lái)的 CSS 語(yǔ)法構(gòu)建而成。其易于使用且具備充裕的定制化空間。Bottstrap 用戶(hù)將在其中找到熟悉的使用感受，但同時(shí) Shoelace 又擁有令人耳目一新的設(shè)計(jì)。您幾乎能夠在任何瀏覽器上使用 Shoelace。CDN 版本非常適合用于原型設(shè)計(jì)，但如果要使用完整功能，您也可以從零開(kāi)始利用 Shoelace 進(jìn)行構(gòu)建。”——摘自 Shoelace 官網(wǎng)
特性
輕量化，約 69 KB。
使用原生 CSS 變量與未來(lái) CSS 功能。
易于使用且高度可定制。
Semantic UI
項(xiàng)目概括
“Semantic UI 將單詞與類(lèi)視為一種可交換的概念。各個(gè)類(lèi)使用來(lái)自自然語(yǔ)言的語(yǔ)法（例如名詞 / 修飾關(guān)系、詞序與多元性）對(duì)概念進(jìn)行直觀鏈接。其能夠?qū)崿F(xiàn)類(lèi)似于 BEM 或 SMACSS 的優(yōu)勢(shì)，但卻不再單調(diào)乏味。”——摘自 Semantic UI 官網(wǎng)
特性
簡(jiǎn)潔的html與可交換的單詞及類(lèi)。
簡(jiǎn)化調(diào)試。
主題化
Skeleton
項(xiàng)目概括
“Skeleton 只設(shè)計(jì)了一些標(biāo)準(zhǔn)的html元素，同時(shí)包含一套網(wǎng)格，但這些已經(jīng)足夠滿(mǎn)足大部分需求。如果您正著手建立一個(gè)小型項(xiàng)目，或者覺(jué)得自己并不需要大型框架提供的那么多實(shí)用工具，那么推薦您使用 Skeleton。”——摘自 Skeleton 官網(wǎng)
特性
“輕如鴻毛”，僅約 400 行代碼。
在設(shè)計(jì)中充分考慮移動(dòng)設(shè)備平臺(tái)。
初步樣式設(shè)計(jì)，并不屬于 UI 框架。
快速上手，無(wú)需編譯或安裝。
我個(gè)人非常喜歡 Skeleton，因?yàn)樗軌蚣涌扉_(kāi)發(fā)速度而且設(shè)置起來(lái)也非常簡(jiǎn)單。
東莞vi設(shè)計(jì)https://www.houdianzi.com/dgvi/ 豌豆資源網(wǎng)站大全https://55wd.com
Tachyons
項(xiàng)目概括
“Tachyons 是一套面向功能性 CSS 與人類(lèi)的設(shè)計(jì)系統(tǒng)。無(wú)需編寫(xiě) CSS代碼，您就能夠快速構(gòu)建并設(shè)計(jì)出新的 UI 方案。”——摘自 Tachyons 官網(wǎng)
“設(shè)計(jì)系統(tǒng)會(huì)隨著規(guī)模的擴(kuò)展（無(wú)論是組織擴(kuò)展還是產(chǎn)品擴(kuò)展）而受到負(fù)面影響，這是因?yàn)椴粩嘤行碌慕M件 / 變體被引入其中。這些談何有時(shí)（或者說(shuō)經(jīng)常）缺少記錄，因此屬于在組件 / 變體需求再次出現(xiàn)時(shí)的重復(fù)產(chǎn)物。即使是具有記錄的組件，對(duì)幾十甚至數(shù)百個(gè)實(shí)例的所有狀態(tài) / 變體進(jìn)行收集與記錄也是項(xiàng)巨大的負(fù)擔(dān)。Tachyons 這類(lèi)系統(tǒng)通過(guò)記錄與限制組件的屬性解決了這個(gè)難題。（我個(gè)人將其視為一種「亞原子」設(shè)計(jì)。）
大家隨后可以通過(guò)這些亞原子組件（屬性）進(jìn)行組件創(chuàng)建。您只需要管理一份包含各「成分」亞原子組件的完整清單，而不再像過(guò)去那樣面對(duì)組件及其變體的繁瑣記錄。這些亞原子組件能夠以無(wú)數(shù)種方式組合成無(wú)數(shù)種組件。這些組件雖然屬性多樣，但仍受限于一組合理的取值范圍（即我們的亞原子組件）。”——Daniel Eden，F(xiàn)acebook 公司設(shè)計(jì)師
特性
一種移動(dòng)優(yōu)先型 CSS 架構(gòu)。
490 種無(wú)障礙顏色組合。
多款調(diào)試工具程序，可顯著降低布局難度。
輕量化（約 14 KB）。
開(kāi)源組件庫(kù)。
能夠與純 HTML、react、Ember、Angular 以及 Rails 等順暢協(xié)作。
無(wú)限可嵌套的響應(yīng)式網(wǎng)格系統(tǒng)。
利用 PostCSS 構(gòu)建而成。
Material Design
項(xiàng)目概括
“由谷歌公司創(chuàng)建并設(shè)計(jì)，Material Design 是一種設(shè)計(jì)語(yǔ)言，其中結(jié)合了各項(xiàng)成功設(shè)計(jì)中的經(jīng)典原則、創(chuàng)新成果與技術(shù)方案。谷歌的目標(biāo)在于開(kāi)發(fā)一套能夠在任意平臺(tái)之上，為所有產(chǎn)品提供統(tǒng)一用戶(hù)體驗(yàn)的設(shè)計(jì)系統(tǒng)。”——摘自 Material Design 官網(wǎng)
特性
受到廣泛支持。
提供入門(mén)模板。
第三方支持。
總結(jié)
以上是生活随笔為你收集整理的十个最流行的前端 CSS 库案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第25件事 创建精益创业画布的9个格
- 下一篇： 全新的开发者导航