web前端入門到實戰：十個最流行的前端 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，由於它可以加快開發速度並且設置起來也很是簡單。

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 庫，發現本文中存在的錯誤，或者是我沒有提到的頂尖庫選項，請在評論中不吝指教！