CSS框架是預先準備好的軟件框架，允許使用層疊樣式表語言更容易，更符合標準的進行網頁設計。大多數這些框架包含至少一個柵格設計（grid）。

功能更強大的框架，還配備了更多的功能和附加的基于JavaScript的功能，但大多設計導向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區分來向大家介紹值得收藏的10 種常用CSS框架。

CSS 框架是一系列 CSS 文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用于簡化web前端開發的工作，提高工作效率。

可以說CSS框架是前端開發中不可或缺的元素。從最初只是定義文字顏色、內容排版，到定義所有的表現，CSS框架在逐漸發展的同時也日益壯大，被人們重視起來。我們開始意識到，從具象的表現中抽出抽象的模塊來重復使用，是減少用戶下載、方便團隊及個人開發最重要的手段。

CSS作為目前的web前端開發的得力助手，其特征決定了其不可撼動的地位：

1.抽象出常用的css樣式,高再可用性,高移植性

2.有固有的定義,詳細的文檔及開發特點

3.高兼容性,可以兼容流行的瀏覽器

4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用于兼容瀏覽器

下面是為大家推薦的十種常用的CSS框架：

1、Bootstrap

作為前端開發最受歡迎的工具之一，Bootstrap在Web開發人員眼中早已成為了業界領先的前端框架。為了使Web開發人員能夠構建出不同的用戶界面組件，Bootstrap能夠將CSS、Javascript和HTML代碼組合到一起。其強大的功能毋容置疑。

2、 Foundation

ZURB于2011年9月設計出了Foundation。與其他CSS框架相比，Foundation不但擁有先進而復雜的界面，而且提供了響應式菜單，以及與各種設備和瀏覽器的兼容性。此外，你還可以使用CSS框架，來輕松地按需設置各種菜單樣式。

3.Semantic UI

作為一名全棧開發人員，Jack Lukic使用自然語言原理創建了Semantic UI框架。憑借著jQuery和LESS功能，Semantic UI提供了光滑、平整且精細的外觀，以及輕量級的用戶體驗。它的社區雖然相對較小，但是其成員既熱情又忠誠。他們的目標是創建一種共享的UI語言，以賦予開發人員和設計人員同樣的權利。目前，Semantic UI社區已經擁有約3000多個主題。

4. Materialize CSS

以Google為基礎的Materialize CSS融合了JavaScript、CSS和HTML等各種組件。它不但具有一定的響應能力，而且存在較少的瀏覽器兼容性問題。如果您希望構建一個優雅的UI，那么Materialize就可以通過大量的自定義CSS，以及多種配色方案，是你獨特的網站設計的必備良品。

5. PureCSS

由Yahoo開發的PureCSS，提供了一組體積小、且具有快速響應能力的CSS模塊。它非常適合開發那些界面美觀且功能不同的項目。PureCSS具有快速響應能力的內置設計，以及最小體積的標準化CSS，最重要的是它們都是免費的!

6.Bulma

作為一個基于Flexbox的開源框架，Bulma在全世界擁有超過20萬名開發用戶。它可以通過可視化的組件，讓開發人員了解其運作的過程。該前端框架通過各種技術，為前端開發人員提供了一種內聚(cohesive)的界面。此外，由于它使用了響應式模板，因此我們可以更好地專注于網站的內容，而不是代碼的編寫。

7.UIKit

UIKit是一個模塊化的輕量級前端CSS框架。它非常適合于快速開發那些功能強大的Web界面。憑借著CSS、HTML和JS組件的全面集合，它能夠讓前端框架既容易擴展，又方便被定制使用。UIKit是用于開發iOS應用最廣泛的前端框架之一。它定義了諸如：按鈕、標簽、導航控制器和表格視圖等核心組件。

8. Tachyons

與其他流行的前端框架不同，Tachyons旨在將CSS規則分解為小型的、可管理的、以及可復用的部件。Tachyons可以幫助開發人員創建出具有高度可讀性、能夠快速加載和響應的網站，而且無需使用大量CSS代碼。

9.Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地構建UI。作為一個utility-based的CSS庫，它比那些語義和精益標記(lean markup)更注重實用性和速度。在創建網站時，您只需要確定項目的范圍，而無需自行編寫CSS。雖然Tailwind并不提供默認的主題，您也找不到任何內置的UI組件，但是您可以使用預設計的部件菜單，來構建目標網站。

10. Ant Design

由阿里巴巴開發的Ant Design是一種Javascript庫類型的ReactJS組件庫。通過將屏幕區域分為24列網格，它增加了用戶對于可見區域的自定義能力。同時，它通過各種填充(filled)和輪廓(outlined)圖標，來滿足不同的應用程序的要求。

怎么樣，也許你看完這十種CSS框架有一種眼花繚亂的感覺，不知道如何抉擇。其實只有我們吃透了這十種CSS框架知識，又何嘗不是一種機遇與挑戰并存的好事呢？以后遇到前端開發時，我們能夠把這十種框架對號入座，根據開發的需求找到最適合的CSS框架來進行前端開發。快動起你的小手，點擊收藏這十種CSS框架吧。

聲明：本文轉載自蛙課網官方網站

想獲取更多資訊、更多視頻、面試題答案，還有各種資源+源碼+工具

就關注“蛙課網校”公眾號吧！

還有不定時福利，免費領取活動等你來參加哦~

總結

以上是生活随笔為你收集整理的值得收藏的十种常用的CSS框架，快码住！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。