模組化CSS設計(一) – 表徵圖

前言：

最近半年多的時間裡我都在參與TAPD項目的設計與前端開發。之所以把設計和前端開發一起承擔主要是考慮到一種較為理想的設計流程，在進行設覺設計的同時把Html、CSS的實現都考慮進去，這樣無論是設計還是代碼都是統一的設計理念和風格，便於維護和後續開發。後來發現TAPD的規模遠大於自己所想，互動研究、視覺設計、代碼設計每一部分都是一份龐大的工作，每個頁面的設計與實現都沒有太多的時間仔細琢磨…還好後期英明的Boss把設覺與互動設計部分交給了其他同事，我才得以對前端代碼仔細研究，用了一個月的時間把所有Html與CSS進行重構。

本系列文章將跟大家分享我在TAPD項目上關於CSS架構設計的一些心得，譬如命名、靈活性等，不會涉及太多CSS技巧。

由於是想到什麼就寫什麼，各章節之間沒有什麼必然的聯絡，希望大家看後有能有所收穫。m(_ _)m

-  by ceil  2009/5/11

模組化CSS設計(一) －－－ 表徵圖

一般來說頁面上的表徵圖會用下邊的兩種形式撰寫：

<a href=”#” title=”Edit”><img src=”[url]” alt=”Edit” /></a>

<a href=”#” class=”btn_edit” title=”Edit”>Edit</a>

前者：直接插入表徵圖的圖片，好處是該按鈕是inline-block，可以很方便的插入到頁面任何地方。譬如說放到一段文字的中間。

Example_01

後者：用CSS背景定位的把表徵圖顯示出來，並且把Edit文字隱去，相比前者降低了表現與邏輯的耦合性，更好的Html語義化。不過為了讓表徵圖有高度和寬度，一般情況會把<a>加上display:block，然後用background-image把表徵圖放進去。那麼弊端也是顯而易見的，假設我需要把一個表徵圖插入到一句話的中間，那麼由於display:block的存在會直接導致表徵圖與其他文字換行顯示。

Example_02

綜合兩者的優點，我在TAPD中是這麼定義一個表徵圖的:

<a href=”#” class=”tag_bug”><i>Bug</i></a>

CSS

這樣TAPD的表徵圖的不但具有<img>形式的靈活性，同時減少耦合性、更好SEO、更好的HTML語義化…etc

(因為要兼顧IE6/7/8、Firefox、Safari、Chrome中display:inline-block的實現，所以迫不得已要額外加一個<i>標籤用於將文字隱藏。)

按照yahoo的rules for high performance web sites的原則，應當減少Client與Server端間的HTTP請求次數。

我還用到CSS Sprite，將多張表徵圖圖片組裝成單獨的一張圖片，用background-position顯示不同的表徵圖

CSS Sprite

也許有人會問：

<a class=”btn_edit”></a>

這麼寫不會更簡單嗎？並且可以減少html和CSS代碼？何必要寫成<a class=”btn_edit”><i>Edit</i></a>

其實我堅持在標籤裡寫文字一方面是基於SEO的考慮，另外還考慮到一種情況，假設突然有一天我們的客戶覺得編輯按鈕表徵圖太糟糕了！要求直接直接用文字。那麼我稍微修改一下CSS檔案便可以巧妙的把原來的表徵圖變成一個文字連結了。又或者是客戶由於某些原因訪問不了TAPD的CSS檔案，標籤裡沒有文字的會變得一片空白，無法使用。

Example_04

另外由於IE6對透明背景的PNG圖片支援不好，所以大部分不規則表徵圖我都是用gif格式。但是有時候gif的256色不能滿足設計師的設計要求(設計師A：俺的作品多姿多彩，256色怎麼夠用！！)。

所以在CSS sprite的時候我是合成了兩張圖片，一張對色彩要求不高並且需要透明背景的GIF圖片和一張對色彩要求高的PNG圖片。

轉自：http://blog.szu.edu.cn/Forum/57067