十个最流行的前端 CSS 库案
前端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 官網
特性
受到廣泛支持。
提供入門模板。
第三方支持。
總結
以上是生活随笔為你收集整理的十个最流行的前端 CSS 库案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第25件事 创建精益创业画布的9个格
- 下一篇： 全新的开发者导航