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