近來，在Web開發(fā)中”框架”是一個(gè)相當(dāng)時(shí)髦的詞。比如JavaScript 框架 YUI、 JQuery和Prototype 都引起廣泛的關(guān)注， Web應(yīng)用框架Rails and Dojo 更是引人矚目，仿佛所有人都使用某種框架來開發(fā)自己的網(wǎng)站。但究竟什么是框架?是不是框架僅僅是對程序員有用，設(shè)計(jì)師是否可以從中收益？

什么是框架？

為了便于溝通，我們給“框架”統(tǒng)一一個(gè)定義（至少在本篇文章中是統(tǒng)一的）：一套包含工具、函數(shù)庫、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，目標(biāo)是使設(shè)計(jì)師和開發(fā)人員把重點(diǎn)放在任務(wù)項(xiàng)目所特有的方面，避免重復(fù)開發(fā)。通常的講，框架就是上面提到的JavaScript框架和Web應(yīng)用框架。

需要強(qiáng)調(diào)說明的是，我們不必討論構(gòu)造、打包發(fā)布，相反，一個(gè)框架只為你或你的團(tuán)隊(duì)使用即可。

CSS框架

有些時(shí)候，你可能嘗到了抽象類似的CSS代碼的甜頭，在那些同時(shí)設(shè)計(jì)幾個(gè)類似網(wǎng)站的設(shè)計(jì)師身上表現(xiàn)最為明顯。此外，團(tuán)隊(duì)中的設(shè)計(jì)師們從框架的方法上有很多的獲益。比如，我在一家報(bào)館工作，所有的20多個(gè)網(wǎng)站保持著很多的共同點(diǎn)，基于新聞網(wǎng)站的特點(diǎn)，它們趨向于更加相似，而不是差異。但是，即使單獨(dú)一個(gè)設(shè)計(jì)師，設(shè)計(jì)一個(gè)從表面上看有差異很大的項(xiàng)目，也可以為CSS框架抽象出一些通用的小碎片。

勞倫斯日報(bào)（Lawrence Journal-World），我在那里工作，我們最近建立了一個(gè)CSS框架，并發(fā)現(xiàn)它是一個(gè)巨大的效率倍增。當(dāng)然，我們花了數(shù)天時(shí)間自己創(chuàng)建了一個(gè)CSS框架，但一旦框架完工，開發(fā)高質(zhì)量網(wǎng)頁的速度是極快的。更何況，既然團(tuán)隊(duì)每一個(gè)設(shè)計(jì)師現(xiàn)在都使用這個(gè)框架，當(dāng)一個(gè)設(shè)計(jì)師修改另一個(gè)團(tuán)隊(duì)成員網(wǎng)頁時(shí)，他們不再需要花20分鐘理解別人的構(gòu)建思路，可以馬上上手。

有那些可以忽略？

當(dāng)投入到一個(gè)整體性很強(qiáng)的CSS框架，你想尋找的東西，是每個(gè)項(xiàng)目都做了一遍又一遍的重復(fù)通用的代碼，目標(biāo)是鞏固這些代碼核心地位，遵循“不重復(fù)自己（Don’t Repeat Yourself）”編碼方法。這使得維護(hù)工作輕易了許多，還可以幫訪問者節(jié)省帶寬開銷。

幾乎每個(gè)我參與的項(xiàng)目中，我必須聲明的幾個(gè)CSS問題：

“大量重置”瀏覽器默認(rèn)風(fēng)格，比如，設(shè)置所有元素的margin和padding為0，去掉框架（framesets）和圖片（images）的border，等等。

以基線對齊。這包括諸如設(shè)定塊級元素的margins相同的(或多個(gè))基準(zhǔn)行高，如段落（paragraph）、頭（header）、以及列表（list）。

創(chuàng)建表單（Form）的基本樣式。

創(chuàng)建幾個(gè)常用的CSS 類，例如，.hide(把display置為none，即隱藏元素)、.mute(設(shè)定為一個(gè)較小的字體和較亮的顏色)。

還有更有趣的事情，許多網(wǎng)站設(shè)計(jì)師發(fā)現(xiàn)自己不斷重復(fù)使用著相同的基本結(jié)構(gòu)，為什么不動(dòng)它整理成自己的，在某種程度上可以非常靈活的用于多個(gè)網(wǎng)站?Yahoo這樣做了，這就是YUI。當(dāng)我們?yōu)榈膭趥愃谷請?bào)網(wǎng)站（the Journal-World）建立CSS框架的時(shí)候，我先看看Yahoo是怎么做的。我們很肯定那不是我們想要的，但作為一個(gè)很好的例子，給我們提供了很多思考和如何建構(gòu)自己框架的想法。我們解決了16個(gè)單元格的問題，它具有足夠的靈活性使我們的每一個(gè)網(wǎng)站都可以應(yīng)用，即使每個(gè)網(wǎng)站看上去與下一個(gè)版本有些差異。另外大多數(shù)網(wǎng)站共用widgets ，象下拉菜單、導(dǎo)航菜單、按鈕等，這些也是主要的需要抽象提取的對象。除此之外,你可能有共同的內(nèi)容名稱，如圖片列表的縮略圖，你可以規(guī)范對CSS命名，如“thumbnail-list”，讓所有顯示縮略圖的都使用這個(gè)CSS類。

另外要做的可能是抽取hack（如兼容那些舊瀏覽器)加入自己的擴(kuò)展的樣式模塊。我自己嘗試過，但發(fā)現(xiàn)hack過于專有而不能抽取到通用框架里。

什么是真正的益處？

框架的真正好處是能夠快速啟動(dòng)工作，你可以創(chuàng)建一個(gè)新的(X)HMTL文件，引入你框架，你不用再處理重置padding 和 margins的事情，漂亮的排版，干凈的表單，整潔的布局，有效的widgets，等等。很明顯，很明顯，雖然，你一定要來定制外觀和感覺為每個(gè)站點(diǎn)。為實(shí)現(xiàn)這一目標(biāo),所有你需要做的是復(fù)寫,并添加到默認(rèn)的風(fēng)格是必要的。

很顯然，盡管你必須為每個(gè)網(wǎng)站定制外觀，為了完成這一任務(wù)，你所需要做的就是在默認(rèn)的樣式上加幾行代碼。舉個(gè)例子，假如在你的框架里，為所有的class屬性為“tabs”的UL標(biāo)簽設(shè)置了基本的水平導(dǎo)航樣式，并且有一個(gè)灰色的邊框，你只需要幾行CSS代碼，就可以定制成你的網(wǎng)站所符合的外觀樣式。

以下為引用的內(nèi)容： ul.tabs li { border: none; background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’); } ul.tabs li { border: none; background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’); }

列表左浮動(dòng)，并且將鏈接以塊的形式置于列表當(dāng)中，鏈接也左浮動(dòng)，字體居中，象煩人的廣告一樣的這些工作，框架以幫你完成，在你的網(wǎng)站設(shè)計(jì)工作中，只需集中精力處理非凡的、有趣的網(wǎng)站細(xì)節(jié)，而不是寫已經(jīng)寫過百萬次的CSS代碼。

如何構(gòu)建一個(gè)CSS框架？

構(gòu)建一個(gè)框架有幾種可能的方式，但最常見，可以說是最有用的，抽象通用的CSS放到一個(gè)獨(dú)立樣式表文件，該樣式表文件只包含整體的一個(gè)特有部分。例如,你可以，一個(gè)樣式處理排版，另一個(gè)處理大量重置。這種好的方法能使你選擇性引入你需要的樣式，在你框架里可能有六七個(gè)不同的樣式文件，但不需要其中的一兩個(gè)，只要不引入即可。我們團(tuán)隊(duì)創(chuàng)建的框架包含5個(gè)樣式文件：

reset.css —處理重置

type.css —處理排版

grid.css —處理布局

widgets.css —處理小零件（widgets），如tab菜單、下拉菜單、以及“更多”按鈕

base.css —包含所有的其他樣式表文件，以便我們只需要在(X)HTML引用base.css即可使用整個(gè)CSS框架
然后，我們把框架存放在一個(gè)單獨(dú)的地方，使每一個(gè)站點(diǎn)都引入這個(gè)框架。當(dāng)然，每一個(gè)網(wǎng)站也需要有特有樣式表，特有樣式對框架進(jìn)行了必要的補(bǔ)充。

忠告

這種方法不錯(cuò),但也帶來新的問題：增加了每一個(gè)頁面的http鏈接數(shù)。對于大流量和中等流量的網(wǎng)站，每個(gè)頁面增加5個(gè)以上HTTP連接數(shù)，系統(tǒng)治理員可能就麻煩大了。兩個(gè)可能解決辦法：

把所有樣式都放到一個(gè)文件里，而不是分成多個(gè)模塊。這里的問題是，失去了框架只包含特定文件的靈活性，而且維護(hù)也變得麻煩。
有一個(gè)服務(wù)器端程序,動(dòng)態(tài)把多個(gè)單個(gè)文件處理成一個(gè)響應(yīng)。我還沒看到這種做法，但假如做好了應(yīng)該是很有效率的。以我上面框架為例，當(dāng)請求（Request）base.css時(shí)候，而不是請求（Request）type.css , grids.css 等的時(shí)候，這一動(dòng)態(tài)處理過程觸發(fā)。這樣一來,單個(gè)文件仍然可用，而在平臺版本上整個(gè)框架也有效的。
總之，我們目標(biāo)不是盡可能的抽象，這點(diǎn)非常重要。相反,其目標(biāo)是提供了一個(gè)快速啟動(dòng)和更有效率的設(shè)計(jì)過程，這是絕對有可能去做過的。假如你過于的抽象，事情會(huì)變得混亂，太多的HTTP鏈接數(shù)會(huì)影響你網(wǎng)站的性能。記住：一個(gè)好的框架不是把事情搞更難更復(fù)雜，而是一個(gè)簡單的從零的開始。

總結(jié)

我們web設(shè)計(jì)師往往經(jīng)常重復(fù)自己，就像我程序世界里的那些朋友，我們重置瀏覽器默認(rèn)樣式、設(shè)計(jì)布局和導(dǎo)航菜單寫了一遍又一遍——幾乎每個(gè)項(xiàng)目。花一點(diǎn)時(shí)間整理CSS 框架，可以使你快速的啟動(dòng)每一個(gè)網(wǎng)站項(xiàng)目，更輕松的維護(hù)網(wǎng)站，并幫助團(tuán)隊(duì)里其他的設(shè)計(jì)師理解你作品。要注重的一點(diǎn)，這些益處的獲得必須以不影響網(wǎng)站的性能為前提。