網(wǎng)頁(yè)設(shè)計(jì)和發(fā)展領(lǐng)域已經(jīng)成為競(jìng)爭(zhēng)激烈的虛擬世界。想要在網(wǎng)絡(luò)的虛擬世界中生存，僅有一堆靜止的在線網(wǎng)絡(luò)應(yīng)用是遠(yuǎn)遠(yuǎn)不夠的，網(wǎng)頁(yè)必須要有很多功能，配以讓人無(wú)法抗拒的設(shè)計(jì)。網(wǎng)頁(yè)編碼一定要合適、精確，才能保證不發(fā)生錯(cuò)誤，使網(wǎng)頁(yè)能在瀏覽器上輕松加載出來(lái)。此外，還要在網(wǎng)頁(yè)設(shè)計(jì)中留出足夠的空間以充許日后的功能增加和改善，這樣做才能讓更多與時(shí)俱進(jìn)的特征能加入到網(wǎng)頁(yè)設(shè)計(jì)中。

網(wǎng)頁(yè)設(shè)計(jì)員和研發(fā)者可用的最好工具之一便是 CSS 框架，它提供高端解決方案來(lái)適應(yīng)高端網(wǎng)頁(yè)研發(fā)需求。CSS 框架減化了編碼結(jié)構(gòu)、減少了編碼時(shí)間，為研發(fā)者帶來(lái)網(wǎng)頁(yè)設(shè)計(jì)的便捷性。

CSS 框架倒底代表什么呢？

在網(wǎng)站繁榮的背后，一個(gè)非?；镜脑蚴腔钴S的 PSD 和 CSS 轉(zhuǎn)換服務(wù)的存在。CSS 是層疊樣式表語(yǔ)言 （Cascading Style Sheet Language） 的英文首字母拼寫，它能使你的網(wǎng)站漂亮地展現(xiàn)出來(lái)。CSS 應(yīng)用人類心理學(xué)和表示語(yǔ)義學(xué)，詳細(xì)地組織數(shù)據(jù)，從而使得用戶在瀏覽你的網(wǎng)站時(shí)不會(huì)失去興趣。

CSS 給予研發(fā)人員在編碼上極大的靈活性，它分離了標(biāo)記內(nèi)容，例如從 PSD 到 HTML 或 XHTML 的轉(zhuǎn)換，以及表示內(nèi)容，這些標(biāo)記內(nèi)容描述了頁(yè)面布局、內(nèi)容展現(xiàn)、字體和風(fēng)格等等。CSS 另一個(gè)便捷特征則是 CSS 框架。CSS 框架是先前備制的元素，存在于網(wǎng)絡(luò)數(shù)據(jù)庫(kù)中。其擴(kuò)展名為 .css，可以使研發(fā)者們回憶起某一特定編碼。因此，研發(fā)者們不必一遍又遍地重寫全部的編碼，這樣也就省下了大把的時(shí)間。由于去除了編碼中的重復(fù)步驟，使得研發(fā)者們有足夠空間把精力集中在重要的地方，制作出視覺(jué)上更另人震撼的網(wǎng)絡(luò)應(yīng)用。此外，減縮的編碼直接隱藏于網(wǎng)頁(yè)加載中，使得網(wǎng)頁(yè)在瀏覽器上能快速地加載出來(lái)。

使用 CSS 框架是明智的選擇，你不用每次做網(wǎng)頁(yè)研發(fā)時(shí)再?gòu)牧汩_(kāi)始了。你可以做一份默認(rèn)風(fēng)格表和標(biāo)記模版，在每次做網(wǎng)頁(yè)研發(fā)時(shí)都可以用到。這些基本內(nèi)容在框架中都有了，你可以把所有的力氣和技術(shù)用設(shè)計(jì)的細(xì)節(jié)和獨(dú)特性上了。

11 種最流行的 CSS 框架

1. Blueprint

一個(gè)叫做 Olav Frihagen Bj?rk?y 的挪威理工學(xué)生是藍(lán)圖（最強(qiáng)大的 CSS 框架之一）研發(fā)背后的原因。藍(lán)圖提供穩(wěn)固的平臺(tái)以使用層疊樣式表語(yǔ)言和開(kāi)發(fā)排版網(wǎng)格。CSS 框架的設(shè)計(jì)目的是為你節(jié)省大量 CSS 研發(fā)的時(shí)間。藍(lán)圖提供了非常好用的網(wǎng)格發(fā)生器，借此用你可基于寬度尺寸的選擇打造框架。此外，藍(lán)圖還提供定制風(fēng)格表，使你可以把按鍵和排版、完整專業(yè)設(shè)計(jì)表格、和用于打印目的簡(jiǎn)便易用的風(fēng)格表組合到一起。最后，藍(lán)圖最重要的優(yōu)勢(shì)之一是它可以執(zhí)行你的瀏覽器默認(rèn)風(fēng)格的批量重設(shè)。

2. Yahoo! UI Library CSS Foundation

雅虎 UI 數(shù)據(jù)庫(kù)由 JavaScript 和 CSS 大力支持，通過(guò)提供如 DOM 腳本語(yǔ)言、AJAX 和 DHTML 的高端技術(shù)，編匯了能夠使你研發(fā)出高度響應(yīng)和互動(dòng)的網(wǎng)絡(luò)應(yīng)用的工具和控制器。雅虎 UI 數(shù)據(jù)庫(kù)可以免費(fèi)使用，也可以在 BSD 協(xié)議下使用。

雅虎 UI 由雅虎公司的前端工程師和全球的參與者們細(xì)心打造。它可以為提升你的網(wǎng)絡(luò)應(yīng)用的可擴(kuò)展性并為其增速，同時(shí)提供夯實(shí)的基礎(chǔ)，這一點(diǎn)已久經(jīng)考驗(yàn)。如果你覺(jué)得用 JavaScript 比較舒服的話，那么它就是你最好最有效的解決方案了。

3. The Yet Another Multicolumn Layout – YAML

另一個(gè)多欄布局是 Dirk Jesse 先生勤奮努力換來(lái)的結(jié)果，他是 YAML 的研發(fā)者。Dirk Jesse 先生對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)有準(zhǔn)確的理解，他使得 YAML 與當(dāng)下使用的多個(gè)相關(guān)網(wǎng)頁(yè)瀏覽器兼容。還有，YAML 為你提供了除錯(cuò)樣式表和打印樣式表。YAML 的另一個(gè)優(yōu)勢(shì)特征為，它提供詳細(xì)的文件編制，并用兩種語(yǔ)言提供活范例 – 英語(yǔ)和德語(yǔ)。此外，YAML 還能使你在你的網(wǎng)頁(yè)瀏覽器內(nèi)研發(fā) CSS 布局，其方法是通過(guò)一個(gè)叫做 YAML Builder 的有效編輯器，這款編輯器以“所見(jiàn)即所得”（WSYIWYG）的方式工作，且接著就會(huì)把不同有創(chuàng)意的設(shè)計(jì)元素融入到你的框架中去。

4. 960GS

960 網(wǎng)格系統(tǒng)的誕生只有一個(gè)目的，就是通過(guò)提供一個(gè)普遍的 960 像素布局寬度平臺(tái)，使得與研發(fā)網(wǎng)站相關(guān)的工作程流程更加順暢。960 網(wǎng)格系統(tǒng)提供了 12 和 16 的兩個(gè)不同包供選擇，可以一起使用，也可分開(kāi)使用。此系統(tǒng)把幾個(gè)實(shí)用的模版和圖表整合到了一起，為你提供了穩(wěn)健的背景支持，也提供了一個(gè)透視圖工具。

5. Fluid 960GS

有著極大優(yōu)勢(shì)的流體 960 網(wǎng)格系統(tǒng)是 Nathan Smith 和他的原創(chuàng) 960 網(wǎng)格系統(tǒng)的結(jié)合體。

6. Elastic CSS

這種 CSS 框架實(shí)際上是在 CSS 框架方案中的“松緊帶”。它就像一條松緊帶一樣，能夠伸縮自如，提供穩(wěn)健的支持，允許要非常廣泛的范圍內(nèi)操作，包括固定的、流動(dòng)的和彈性的布局。不用折衷你想要的網(wǎng)絡(luò)應(yīng)用布局，僅僅通過(guò)在彈性 CSS 框架上運(yùn)行數(shù)組排列和結(jié)合，直到得到了你想要的布局。彈性 CSS 框架唯一的美中不足便是它需要使用 JavaScript。JavaScript 能提供高質(zhì)量和美學(xué)設(shè)計(jì)，但對(duì)不懂 JavaScript 的人來(lái)說(shuō)，這可是個(gè)負(fù)擔(dān)。

7. The jQuery UI CSS Framework

這款 CSS 框架是為了研發(fā)以 jQuery 為基礎(chǔ)的定制小工具而設(shè)計(jì)。這個(gè) CSS 框架包含的類別涵蓋了所有必要的用戶介面的大多數(shù)。如果你使用 jQuiery UI CSS 框架，那么你將能夠輕松地把相關(guān)插件融入到網(wǎng)站編碼中，且能夠使用共享的傳統(tǒng)標(biāo)記編碼。如果你選擇 jQuery，那么你就可以創(chuàng)建按鈕，并在單個(gè)給定時(shí)間內(nèi)選擇多個(gè)按鈕。

8. SenCSs

SenCSs 的全名將揭示其含義 – 合理標(biāo)準(zhǔn) CSS （ensible Standards CSS），這是這款 CSS 的任務(wù)。它能讓你合理地為所有 CSS 中的間歇（也就是重復(fù)）部分設(shè)計(jì)式樣，因此可省出大把時(shí)間用手攻克其他網(wǎng)站研發(fā)的重要問(wèn)題。

9. Typogridphy

這款 CSS 框架乃是基于 960 網(wǎng)格系統(tǒng)而成，它可以讓你創(chuàng)造出極為動(dòng)感和多變的網(wǎng)格布局。Typogridphy 是一個(gè)印刷和網(wǎng)格布局 CSS 框架，給網(wǎng)站設(shè)計(jì)員和研發(fā)員提供極限的范圍，使他們快速地給有極強(qiáng)功能和美觀的網(wǎng)格布局編碼。

10. Tripoli

Tripoli 不能算作是一款 CSS 框架，而更應(yīng)說(shuō)是描述 HTML 元素的 CSS 標(biāo)準(zhǔn)。Tripoli 為研發(fā)動(dòng)畫布局提供穩(wěn)健的繪制引擎，而不會(huì)改變編碼的排印。它是非常成熟的 CSS 標(biāo)準(zhǔn)，可以重置默認(rèn)瀏覽器，并靜靜地工作。

11. BlueTrip CSS Framework

這款 CSS 框架名副其實(shí)，提供了三種可能是最好的框架的綜合體，即 960GS, Blueprint 和 Tripoli。

為什么要挑選 CSS 框架

在這個(gè)年代，僅僅是努力工作已不夠了，要成功的必要條件是要聰明地工作，不只是努力。CSS 框架就可以讓你實(shí)現(xiàn)聰明地工作。這是研發(fā)網(wǎng)站聰明的方式。它通過(guò)提供強(qiáng)健的研發(fā)網(wǎng)站基礎(chǔ)，使研發(fā)人員免于所有的焦慮和沮喪，不用再?gòu)念^開(kāi)始。

此外，網(wǎng)站研發(fā)過(guò)程可謂相當(dāng)無(wú)枯燥和費(fèi)時(shí)，研發(fā)員可能在重復(fù)的編碼中出錯(cuò)。CSS 框架可以避免這種情況發(fā)生。如果你所有項(xiàng)目都有默認(rèn)的 CSS 編碼，那么你不便不用檢查網(wǎng)站每一頁(yè)的源碼了。一個(gè)詳細(xì)的 CSS 框架保證了研發(fā)過(guò)程的工作流的果實(shí)，并節(jié)省了大量時(shí)間，避免了研發(fā)團(tuán)隊(duì)內(nèi)部的誤解和交流不暢。

正如你已在上文看到的內(nèi)容，大多數(shù) CSS 框架已經(jīng)做到了跨瀏覽器兼容，所以你不必?fù)?dān)心你的網(wǎng)站的兼容性。
最后，真的沒(méi)有什么理由不推建使用 CSS 框架了。它節(jié)省你寶貴的時(shí)間，以極有利的特征和功能補(bǔ)充網(wǎng)站，并給予研發(fā)人員足夠的空間和靈活度來(lái)作出最好的設(shè)計(jì)。