開發網站或web應用時，網頁開發工程師往往都需要編寫CSS，如果每個項目都是從0開始，將會花費大量的時間和精力，並且還會處理很多重復性工作。
漸漸地，工程師們意識到，可以拿出抽象的模塊來重復使用，以此來提升開發速度。於是乎，CSS框架便應運而生，並且得到了越來越多的工程師的青睞。
本文精選了15個2019年最佳CSS框架，如果你想要更快更簡單地開發網站或web程序，一定不要錯過哦~
HOW | CSS框架如何幫助前端開發工程師？
在正式開始之前，不妨先了解一下CSS框架。
簡單點講，CSS框架就是一個預先准備好的網站基礎框架。幾乎每個CSS框架都具備一些基本結構，比如，柵格設計、交互式UI設計模式、Web排版、工具提示、按鈕、圖標，以及表單元素等等。這些預先准備好的框架可以讓工程師們在一個相對成熟的模板上進行定制和延伸，而不是從0開始開發。
最棒的一點是，盡管開發的項目不盡相同，但很多CSS框架依舊可以重復利用，這將在更大程度上節省時間。
WHY | 為什么需要使用CSS框架？
誠然，CSS具備諸多優點，但它也並非完美，很多工程師也會因此產生疑問：使用CSS框架真的有必要嗎？
在我來看，使用CSS框架確實非常高效，如果非要下一個定論，姑且可以用利遠大於弊這個說法：
其一，CSS框架可以幫助工程師更快地開發網站
在開發網站或者web應用時，時間節點非常關鍵，使用CSS框架可以極大地節約時間成本。並且CSS框架幾乎都具備高度自定義功能，不會對設計還原造成重大影響。
此外，對於初級前端開發，CSS框架的作用會更加明顯。使用一個現成的網站基礎框架和與之配套的工具與小部件，可以幫助開發比較順利地開發項目，即使他們的開發水平不夠優秀也不會有很大影響。
其二，CSS框架可以快速構建線框或原型項目
無論是網站設計還是產品設計，原型都至關重要。項目原型可以幫助團隊快速驗證和測試項目正確性。如果使用CSS框架，就可以更快地做出網站原型以盡早測試。
補充一點：對於產品經理而言，也可以使用快速原型工具畫原型。
WHAT | 2019年最佳的CSS框架有哪些?
以下是我們精心挑選的15個CSS框架，每個框架的特色和利弊都有盡力說到，希望可以幫助你找到目前最符合你需要的一款。
1. Bootstrap
Bootstrap是目前使用最廣泛的CSS框架，它是 Twitter 推出的一個用於前端開發的開源工具包，當前最流行的版本是2018年發布的Bootstrap 4。相比Bootstrap 3，Bootstrap 4增加了很多特色和功能，例如新的配色方案，新的修改器以及新的實用程序分類等等。此外，Bootstrap 4是使用SASS構建的，也就是說，Bootstrap現在同時適用於LESS和SASS了。
Bootstrap更多功能解析：
1）響應式設計
Bootstrap的響應式設計方案是基於其柵格設計系統，操作方便又簡單，開發人員可以快速創建一個基於Flexbox的網站布局，並且兼容所有瀏覽器。此外，Bootstrap也是第一個引入移動優先設計的CSS框架。
2）海量資源
Bootstrap有非常豐富的前端框架庫，里面有網站布局式樣，網站模板、Bootstrap主題模板、管理面板以及大量的UI組件，比如按鈕、表單、卡片、進度條等等。這些預先構建的組件都可以直接使用。
3）簡單易學
入門Bootstrap比較簡單，現在有很多設計師在學前端的時候，都會學習Bootstrap框架。
2. Foundation
相比其他CSS框架，Foundation顯得相對專業，功能更加全面，因此也具備一定的學習難度。作為一個更高級，更復雜的框架，Foundation具有超強的可讀性、靈活性和可自定義性。這些特色也讓它成為創建響應式網站和應用程序的首選框架之一，很多大型網站，比如Facebook、Ebay、Mozilla、Disney，Adobe等都使用了該框架。
Foundation更多功能和特色解析：
1）強大的電子郵件框架
除了網站和web應用程序之外，Foundation還可以創建外觀精美的響應式HTML電子郵件，並且適配任何設備。
2）在線培訓服務支持
Foundation的學習難度較大，因此Zurb（Foundation的開發團隊）開設了在線培訓課程和以及專業咨詢服務。
3）更易自定義
Foundation比Boostrap更加靈活，Bootstrap做出來的東西往往會非常相似，但Foundation可以做非常高度的自定義設計，只要專業技能足夠，前端開發人員可以完全掌控UI界面。
3. Pure
Pure是Yahoo在2014年創建的一個輕量的響應式CSS框架。它基於Normalize.css構建，開發人員可以使用其柵格設計和菜單創建高度響應式的頁面布局。
和Bootstrap不同，Pure在默認情況下是響應式的，因此無法禁用響應式選項。此外，如其名所示，Pure是一個純CSS框架，不包含任何JavaScript組件，體量也非常輕小，整個模塊壓縮后只有3.8KB。
4. Bulma
Bulma是一個基於Flexbox布局模型的免費開源項目。該CSS框架也是輕量級、響應式的，並且具備移動優先的理念。對開發人員而言，Bulma和Bootstrap以及Foundation可以一起並列為三大最受歡迎的CSS框架，目前全球已經有超過15萬名開發人員在使用Bulma。
Bulma之所以廣受歡迎的原因還有其高度可讀的命名規則，這對於新手開發人員來講，會大大降低學習成本。還有一個比較有意思的點，Bulma在Github上可以說是明星選手般的存在，人氣超高。
5. Semantic UI
Semantic UI是一個用戶友好度爆表的響應式前端框架，具備3000多個主題變量和50多個UI組件，可以快速搭建漂亮的網頁。Semantic UI還集成了許多第三方資源庫，包括React，Angular，Meteor，Ember等等，給開發人員帶來了更多便捷。
Semantic UI官方一直大力宣傳他們的最大亮點——“human-friendly HTML”，也就是說，開發人員可以使用通用語言來直觀展示分類和命名，因此幾乎沒有任何門檻就可以讀懂代碼。
此外，相比Boostrap的很多類似的UI界面或Foundation需要自定義操作的UI界面，Semantic UI 可以默認創建更加美觀的界面和布局。
6. UI kit
UI kit是一個輕量級的CSS和網頁UI設計框架，它最大的特色是功能全面性不輸其他CSS框架，但奉行極簡主義的它體量卻更輕巧，幾乎可以用麻雀雖小，五臟俱全來形容了。
UI kit具備超多的SVG圖標、字體以及組件，加之其強大的響應式設計，統一的UI樣式和靈活的自定義選項等功能，開發人員可以快速創建簡潔、模塊化的web界面。
此外，開發人員來可以在該框架中使用HTML創建更高級的flexbox布局。
7. Materialize CSS
Materialize CSS是Google在2014年開發的響應式前端框架，它是基於Google的Material Design創建的，所以尤其適合網站或Android平台的項目使用。
目前來看，兩類人使用該框架最多，一種是熱愛Google Material Design的開發人員和設計師，所謂愛屋及烏，加之Materialise CSS本身確實也比較優秀，因此很多Material Design愛好者自然而然就用它了。
第二種是熟悉Boostrap的開發人員，因為Materialize CSS也是使用了Bootstrap的12列柵格設計模式，因此使用起Materialize CSS來也會比較熟悉，可以快速創建響應式頁面布局。
如果你是其中之一，不妨試試Materialise CSS。
8. Milligram
Milligram可以說是最輕小的CSS框架之一，壓縮后到最小時僅2KB，因此只能提供最小的樣式設置。Milligram雖然非常輕小，但功能依舊不差，它具有一整套web開發工具，並且充分利用了CSS3規范中的各種原理來幫助開發人員快速開發。
9. Skeleton
Skeleton是一個響應非常快速的CSS框架。和Milligram一樣，它的體量也非常輕小，僅包含400行源代碼，但它具有的柵格設計、版式、按鈕、表單、列表、表格等功能，依舊可以幫助開發人員快速創建項目。
如果你正在進行某個比較輕量級的項目，或者不需要一些大型框架的諸多實用程序時，使用Skeleton或許是一個不錯的選擇。
10. Tailwind CSS
Tailwind CSS是一個高度可定制的CSS框架，在這一點上，Tailwind CSS幾乎完勝了其他所有的CSS框架。
那么，Tailwind是如何做到的呢？
首先，Tailwind框架是使用PostCSS編寫的，並且使用了JavaScript進行配置。這樣，開發人員可以完全自主掌握網頁UI風格，包括顏色、邊框大小、字重，間距、陰影等等。
舉個例子，用Tailwind創建按鈕，它們的外觀如下：
- Pill按鈕
- Outline
- 3D效果
其次，Tailwind沒有大量預先設置好樣式的UI組件，而是專注於實用程序，因此開發人員可以更加自主的創建界面UI。但學習實用程序並不容易，如果你對Atomic CSS也一無所知，學習難度就更高了。
11. Spectre
Spectre.css是一個輕量級，響應式和現代化的CSS框架，它基於Flexbox布局創建，具備比較優雅的設計外觀、版式以及組件。並且Spectre的所有組件也是完全使用CSS創建的，因此不需要使用任何JavaScript語言就可以使用。
12. Base
Base是一個響應式CSS框架，它也是非常輕量級的，但功能依舊強大，具備多個獨立的模板，方便選取和使用。此外，它也具備移動優先設計理念，並且兼容主流瀏覽器，包括IE 10+。
13. Picnic CSS
Picnic也是一個輕量級CSS框架，壓縮后的大小不到10kb。該框架最大的特點就是具有多個交互式組件，包括柵格、表單、選項卡、工具提示等等，可以幫助開發人員快速創建響應式網站和web應用程序。
14. Mustard UI
Mustard UI可以說是一款入門級別的CSS框架。如果你是第一次了解CSS框架，可以從它的模塊開始學習，零門檻，幾乎是即學即用。它的功能有限，但僅作為入門跳板倒也是非常不錯的。
15. Dead Simple Grid
Dead Simple Grid是一個非常有用的工具，體量也不大，是一個開源項目，僅包含250個字節的CSS代碼和2個分類。
嚴格意義上甚至可以不把它看做一個完整的CSS框架，但它可以為前端開發工程提供非常好用非常強大的柵格系統，這也是必須要推薦它的原因。
更多響應式CSS框架推薦
1. Susy
Susy是一個基於Sass的輕量級柵格布局框架，可以幫助開發人員簡化響應式柵格布局開發流程。使用Susy時，開發人員還可以使用float，flexbox，table等其他CSS技術。
2. Animate.css
Animate.css可以幫助開發人員快速添加CSS動畫，包括過渡、變換、彈跳、滾動等等。
3. Paper CSS
Paper CSS是一個使用LESS構建的CSS框架。
4. NES.css
NES.css是一個具有NES樣式的CSS框架，它只提供組件，沒有布局。
5. Tent CSS
Tent CSS是一個簡單的CSS框架，具備構建網站的基礎結構。
6. Simplegrid
Simple Grid是一個輕量級CSS網格，具備12列柵格設計樣式，可以快速構建響應式網站。
關於CSS框架的相關問題
1. Bootstrap是一個好的框架（CSS框架）嗎？
當然咯。Bootstrap是本文第一個介紹的CSS框架，也是目前最常用的CSS框架。如果你對Boostrap感興趣，建議你使用最新的Bootstrap 4。
2. Bootstrap比CSS好用嗎？
兩者其實本質不太一樣，CSS是一種計算機語言，而Bootstrap是一種前端開發框架，並且Bootstrap是基於HTM, CSS和JavaScript創建的。他們兩者在使用中各自都有優缺點，這兩者也都是開發工程師都要掌握的。
3. Flexbox是框架嗎？
Flexbox不是框架。Flexbox（Flexible Box Layout Module）是CSS3中添加的一個新功能，本質上是一種布局模式，可以幫助開發工程師快速創建網頁布局。
4. HTML是框架嗎？
HTML不是框架。HTML（Hypertext Marked Language）中文為超文本標記語言，是一種標記語言。開發工程師可以把界面信息按某種規則寫成HTML文件，並且讓瀏覽器識別，成為我們看到的網頁。
關於CSS框架就暫時介紹到這里，如果你有其他好的CSS框架開源項目，歡迎分享哦~