CSS框架是預(yù)先準(zhǔn)備好的軟件框架，允許使用層疊樣式表語(yǔ)言更容易，更符合標(biāo)準(zhǔn)的進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。大多數(shù)這些框架包含至少一個(gè)柵格設(shè)計(jì)（grid）。

功能更強(qiáng)大的框架，還配備了更多的功能和附加的基于JavaScript的功能，但大多設(shè)計(jì)導(dǎo)向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區(qū)分來(lái)向大家介紹值得收藏的10 種常用CSS框架。

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

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

CSS作為目前的web前端開(kāi)發(fā)的得力助手，其特征決定了其不可撼動(dòng)的地位：

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

2.有固有的定義,詳細(xì)的文檔及開(kāi)發(fā)特點(diǎn)

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

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

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

1、Bootstrap

作為前端開(kāi)發(fā)最受歡迎的工具之一，Bootstrap在Web開(kāi)發(fā)人員眼中早已成為了業(yè)界領(lǐng)先的前端框架。為了使Web開(kāi)發(fā)人員能夠構(gòu)建出不同的用戶界面組件，Bootstrap能夠?qū)SS、Javascript和HTML代碼組合到一起。其強(qiáng)大的功能毋容置疑。

2、 Foundation

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

3.Semantic UI

作為一名全棧開(kāi)發(fā)人員，Jack Lukic使用自然語(yǔ)言原理創(chuàng)建了Semantic UI框架。憑借著jQuery和LESS功能，Semantic UI提供了光滑、平整且精細(xì)的外觀，以及輕量級(jí)的用戶體驗(yàn)。它的社區(qū)雖然相對(duì)較小，但是其成員既熱情又忠誠(chéng)。他們的目標(biāo)是創(chuàng)建一種共享的UI語(yǔ)言，以賦予開(kāi)發(fā)人員和設(shè)計(jì)人員同樣的權(quán)利。目前，Semantic UI社區(qū)已經(jīng)擁有約3000多個(gè)主題。

4. Materialize CSS

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

5. PureCSS

由Yahoo開(kāi)發(fā)的PureCSS，提供了一組體積小、且具有快速響應(yīng)能力的CSS模塊。它非常適合開(kāi)發(fā)那些界面美觀且功能不同的項(xiàng)目。PureCSS具有快速響應(yīng)能力的內(nèi)置設(shè)計(jì)，以及最小體積的標(biāo)準(zhǔn)化CSS，最重要的是它們都是免費(fèi)的!

6.Bulma

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

7.UIKit

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

8. Tachyons

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

9.Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地構(gòu)建UI。作為一個(gè)utility-based的CSS庫(kù)，它比那些語(yǔ)義和精益標(biāo)記(lean markup)更注重實(shí)用性和速度。在創(chuàng)建網(wǎng)站時(shí)，您只需要確定項(xiàng)目的范圍，而無(wú)需自行編寫CSS。雖然Tailwind并不提供默認(rèn)的主題，您也找不到任何內(nèi)置的UI組件，但是您可以使用預(yù)設(shè)計(jì)的部件菜單，來(lái)構(gòu)建目標(biāo)網(wǎng)站。

10. Ant Design

由阿里巴巴開(kāi)發(fā)的Ant Design是一種Javascript庫(kù)類型的ReactJS組件庫(kù)。通過(guò)將屏幕區(qū)域分為24列網(wǎng)格，它增加了用戶對(duì)于可見(jiàn)區(qū)域的自定義能力。同時(shí)，它通過(guò)各種填充(filled)和輪廓(outlined)圖標(biāo)，來(lái)滿足不同的應(yīng)用程序的要求。

怎么樣，也許你看完這十種CSS框架有一種眼花繚亂的感覺(jué)，不知道如何抉擇。其實(shí)只有我們吃透了這十種CSS框架知識(shí)，又何嘗不是一種機(jī)遇與挑戰(zhàn)并存的好事呢？以后遇到前端開(kāi)發(fā)時(shí)，我們能夠把這十種框架對(duì)號(hào)入座，根據(jù)開(kāi)發(fā)的需求找到最適合的CSS框架來(lái)進(jìn)行前端開(kāi)發(fā)。快動(dòng)起你的小手，點(diǎn)擊收藏這十種CSS框架吧。

聲明：本文轉(zhuǎn)載自蛙課網(wǎng)官方網(wǎng)站

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

就關(guān)注“蛙課網(wǎng)校”公眾號(hào)吧！

還有不定時(shí)福利，免費(fèi)領(lǐng)取活動(dòng)等你來(lái)參加哦~

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。