現(xiàn)在的網(wǎng)站風(fēng)格已經(jīng)與它們很早之前的樣子有了很大的不同。如果現(xiàn)在再回過(guò)頭去看有些公司最初的網(wǎng)站UI，我想大多數(shù)互聯(lián)網(wǎng)用戶(hù)都很難認(rèn)得出來(lái)。所以也多虧了網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的創(chuàng)新，現(xiàn)在網(wǎng)站不僅僅是只能顯示信息，它們同樣也可以擁有有趣的動(dòng)畫(huà)、多樣的布局和互動(dòng)的元素。而其中，這些大部分都是由CSS來(lái)實(shí)現(xiàn)的。

所以CSS的出現(xiàn)為原本平平無(wú)奇的網(wǎng)頁(yè)注入了活力。這也是網(wǎng)站的用戶(hù)體驗(yàn)得到進(jìn)一步進(jìn)化的原因。這可能就是當(dāng)今幾乎所有的網(wǎng)站或多或少都在使用CSS的原因之一。

今年，一些CSS技術(shù)正在掀起一場(chǎng)新的技術(shù)革新，例如：Flexbox，盡管在Google Chrome上83%的頁(yè)面加載使用了Flexbox，但另一個(gè)名為Grid的新競(jìng)爭(zhēng)對(duì)手也正在慢慢流行起來(lái)。另外還有 CSS Writing-Mode、移動(dòng)動(dòng)畫(huà)、單頁(yè)網(wǎng)站、靈活字體和滾動(dòng)捕捉等技術(shù)也可能產(chǎn)生一定影響。

但在本文里，不會(huì)討論不同CSS技術(shù)之間的異同，主要是以介紹CSS框架為主。因?yàn)檫^(guò)去的幾年里它們才開(kāi)始流行起來(lái)，但已經(jīng)有越來(lái)越多的開(kāi)發(fā)人員已經(jīng)開(kāi)始接觸使用它們了。

CSS框架是什么？

我們將CSS定義為一種設(shè)計(jì)語(yǔ)言，它為HTML文檔的UI設(shè)計(jì)提供了幫助。通過(guò)CSS進(jìn)行設(shè)計(jì)有很多優(yōu)勢(shì)，它可以與任何類(lèi)型的XML一起使用，也包括XUL和SVG。CSS框架就像是一個(gè)現(xiàn)成的包，其中包含可以作為網(wǎng)站結(jié)構(gòu)基礎(chǔ)的文件。

使用框架有很多好處。以下是其中一些：

• 節(jié)省時(shí)間：這是最突出的優(yōu)勢(shì)之一。使用CSS框架，開(kāi)發(fā)人員在構(gòu)建應(yīng)用或網(wǎng)站時(shí)無(wú)需從零開(kāi)始。他們可以空出學(xué)習(xí)的時(shí)間專(zhuān)注到其他重要工作上，例如UI設(shè)計(jì)，移動(dòng)端化以及解決特定瀏覽器兼容問(wèn)題。
• 代碼可重用：如果你的項(xiàng)目是一個(gè)擁有很多頁(yè)面的大型項(xiàng)目，并且后續(xù)仍在持續(xù)更新，那么框架的使用將對(duì)你將很有用的。可以說(shuō)擁有強(qiáng)大重用特性的框架，能明顯縮短您項(xiàng)目的準(zhǔn)備周期。
• 跨瀏覽器的問(wèn)題：長(zhǎng)久以來(lái)，處理各瀏覽器間的訪(fǎng)問(wèn)差異，是廣大前端開(kāi)發(fā)者最為頭疼的事情。 但CSS框架能提前為您發(fā)現(xiàn)并解決各瀏覽器間的差異，以保證您可以在任何瀏覽器中無(wú)差異的運(yùn)行。
• 標(biāo)準(zhǔn)結(jié)構(gòu)確保一致性：前端框架通常由CSS，HTML和JavaScript文件組成，這些文件有助于確保所有頁(yè)面中元素（如設(shè)計(jì)和表單等）的一致性。

優(yōu)秀的CSS框架

Bootstrap

Bootstrap最初是Twitter Blueprint作為供團(tuán)隊(duì)內(nèi)部使用的工具而創(chuàng)建的。但在它公開(kāi)發(fā)布后，它受到了開(kāi)發(fā)者廣泛使用，使用率增長(zhǎng)不斷增長(zhǎng)。

Bootstrap為警告窗、按鈕、輪播、下拉菜單、表單等元素提供了設(shè)計(jì)模板。通過(guò)Bootstrap移動(dòng)優(yōu)先功能，可以為您輕松創(chuàng)建響應(yīng)式布局，它能為您的應(yīng)用在多個(gè)設(shè)備上實(shí)現(xiàn)一致的設(shè)計(jì)。

Skeleton

Skeleton以“簡(jiǎn)單支持響應(yīng)式樣板”的特點(diǎn)著稱(chēng)。因?yàn)樵摽蚣苤挥写蠹s400行代碼，它更適合于較小的項(xiàng)目或開(kāi)發(fā)人員有著輕量化要求的情況。

對(duì)于那些剛剛開(kāi)始使用前端框架的人來(lái)說(shuō)，這也是一個(gè)不錯(cuò)的選擇。但因?yàn)镾keleton缺乏了CSS設(shè)計(jì)模板、預(yù)處理器和