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

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

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

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

CSS框架是什么？

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

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

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

優(yōu)秀的CSS框架

Bootstrap

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

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

Skeleton

Skeleton以“簡單支持響應(yīng)式樣板”的特點著稱。因為該框架只有大約400行代碼，它更適合于較小的項目或開發(fā)人員有著輕量化要求的情況。

對于那些剛剛開始使用前端框架的人來說，這也是一個不錯的選擇。但因為Skeleton缺乏了CSS設(shè)計模板、預(yù)處理器和