關於網頁設計製作中設計師的框架

近來，在Web開發中」框架」是一個相當時髦的詞。例如JavaScript 框架YUI、 JQuery和Prototype 都引起廣泛的關注， Web應用框架Rails and Dojo 更是引人注目，彷彿所有人都使用某種框架來開發自己的網站。但究竟什麼是框架?是不是框架只是對程式設計師有用，設計師是否可以從中獲得收益？

什麼是框架？

為了便於溝通，我們給「框架」統一一個定義（至少在本篇文章中是統一的）：一套包含工具、函數庫、約定，以及嘗試從常用任務中抽像出可以復用的通用模組，目標是使設計師和開發人員把重點放在任務項目特有的方面，避免重複開發。通常的講，框架就是上面提到的JavaScript框架和Web應用框架。

需要強調說明的是，我們不必討論構造、打包發布，相反，一個框架只為你或你的團隊使用即可。

CSS框架

有些時候，你可能嚐到了抽象類似的CSS程式碼的甜頭，在那些同時設計幾個類似網站的設計師身上表現最為明顯。此外，團隊中的設計師們從框架的方法上有很多的獲益。例如，我在一家報館工作，所有的20多個網站保持著許多的共同點，基於新聞網站的特點，它們趨向於更加相似，而不是差異。但是，即使單獨一個設計師，設計一個從表面上看有差異很大的項目，也可以為CSS框架抽象化一些通用的小碎片。

勞倫斯日報（Lawrence Journal-World），我在那裡工作，我們最近建立了一個CSS框架，並發現它是一個巨大的效率倍增。當然，我們花了數天時間自己創建了一個CSS框架，但一旦框架完工，開發高品質網頁的速度是極快的。更何況，既然團隊每個設計師現在都使用這個框架，當一個設計師修改另一個團隊成員網頁時，他們不再需要花20分鐘理解別人的構建思路，可以馬上上手。

有那些可以忽略？

當投入到一個整體性很強的CSS框架，你想尋找的東西，是每個專案都做了一遍又一遍的重複通用的程式碼，目標是鞏固這些程式碼核心地位，遵循「不重複自己（Don' t Repeat Yourself）”編碼方法。這使得維護工作容易了許多，還可以幫助訪客節省頻寬開銷。

在幾乎每個我參與的專案中，我必須聲明的幾個CSS問題：

「大量重置」瀏覽器預設風格，例如，設定所有元素的margin和padding為0，去掉框架（framesets）和圖片（images）的border，等等。

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

建立表單（Form）的基本樣式。

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

還有更有趣的事情，許多網站設計師發現自己不斷重複使用著相同的基本結構，為什麼不動它整理成自己的，在某種程度上可以非常靈活的用於多個網站?Yahoo這樣做了，這就是YUI。當我們為的勞倫斯日報網站（the Journal-World）建立CSS框架的時候，我先看看Yahoo是怎麼做的。我們很肯定那不是我們想要的，但作為一個很好的例子，給我們提供了很多思考和如何建構自己框架的想法。我們解決了16個單元格的問題，它具有足夠的靈活性使我們的每個網站都可以應用，即使每個網站看起來與下一個版本有些差異。另外大多數網站共用widgets ，像下拉選單、導航選單、按鈕等，這些也是主要的需要抽象提取的物件。除此之外,你可能有共同的內容名稱，如圖片列表的縮圖，你可以規範對CSS命名，如“thumbnail-list”，讓所有顯示縮圖的都使用這個CSS類。

另外要做的可能是抽取hack（如兼容那些舊瀏覽器)加入自己的擴充功能的樣式模組。我自己嘗試過，但發現hack過於專有而無法抽取到通用框架裡。

什麼是真正的益處？

框架的真正好處是能夠快速啟動工作，你可以創建一個新的(X)HMTL文件，引入你框架，你不用再處理重置padding 和margins的事情，漂亮的排版，乾淨的表單，整齊的佈局，有效的widgets，等等。很明顯，很明顯，雖然，你一定要來定制外觀和感覺為每個站點。為實現這一目標,所有你需要做的是複寫,並添加到默認的風格是必要的。

很顯然，儘管你必須為每個網站自訂外觀，為了完成這項任務，你所需要做的就是在預設的樣式上加幾行程式碼。舉個例子，如果在你的框架裡，為所有的class屬性為「tabs」的UL標籤設定了基本的水平導航樣式，並且有一個灰色的邊框，你只需要幾行CSS代碼，就可以定製成你的網站所符合的外觀樣式。

列表左浮動，並且將鏈接以塊的形式置於列表當中，鏈接也左浮動，字體居中，象煩人的廣告一樣的這些工作，框架以幫你完成，在你的網站設計工作中，只需集中精力處理特別的、有趣的網站細節，而不是寫已經寫過百萬次的CSS程式碼。

如何建構一個CSS框架？

建立一個框架有幾種可能的方式，但最常見，可以說是最有用的，抽象通用的CSS放到一個獨立樣式表文件，該樣式表文件只包含整體的一個特有部分。例如,你可以，一個樣式處理排版，另一個處理大量重置。這種好的方法能讓你選擇性地引入你需要的樣式，在你框架裡可能有六、七個不同的樣式文件，但不需要其中的一兩個，只要不引進即可。我們團隊創建的框架包含5個樣式檔案：

reset.css —處理重置

type.css —處理排版

grid.css —處理佈局

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

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

忠告

這種方法不錯,但也帶來新的問題：增加了每個頁面的http連結數。對於大流量和中等流量的網站，每個頁面增加5個以上HTTP連線數，系統管理員可能就麻煩大了。兩個可能解決方法：

把所有樣式放到一個檔案裡，而不是分成多個模組。這裡的問題是，失去了框架只包含特定文件的靈活性，而且維護也變得麻煩。
有一個伺服器端程式,動態把多個單一檔案處理成一個回應。我還沒看到這種做法，但如果做好了應該是很有效率的。以我上面框架為例，當請求（Request）base.css時候，而不是請求（Request）type.css , grids.css 等的時候，這個動態處理過程觸發。這樣一來,單一文件仍然可用，而在平台版本上整個框架也有效的。
總之，我們目標不是盡可能的抽象，這一點非常重要。相反,其目標是提供了一個快速啟動和更有效率的設計過程，這是絕對有可能去做過的。如果你過於的抽象，事情會變得混亂，太多的HTTP連結數會影響你網站的效能。記住：一個好的框架不是把事情搞得更難更複雜，而是一個簡單的從零的開始。

總結

我們web設計師往往經常重複自己，就像我程式世界裡的那些朋友，我們重置瀏覽器預設樣式、設計佈局和導航選單寫了一遍又一遍——幾乎每個項目。花一點時間整理CSS 框架，可以讓你快速的啟動每一個網站項目，更輕鬆的維護網站，並幫助團隊裡其他的設計師理解你作品。要注意的一點，這些益處的獲得必須以不影響網站的效能為前提。