有用的 CSS 提示
阿恆
Jonathan Snook 根據他個人經驗和習慣,總結了一些有用的 CSS 提示,包括是否應該使用像素作為字型大小的單位、把 CSS 宣告寫成單行、適當地縮排、只需支援最新的瀏覽器等等,這些提示很大程度上是 Jonathan 的個人偏好,正如他自己說:「我希望把我在 CSS 上的工作習慣與大家分享,但我必須提醒你,這裏所說的可能很有爭議性,但不活在危機之中生命有甚麼意義呢?(對的,當 CSS 被視為「危機」的時候,我的確活得很刺激。)」
Jonathan 的提示包括:
-
用像素作為字型大小的單位:為了廣大 IE 的使用者,由於 IE 不懂得調節字型大小,請不要用像素作為字型大小的單位
-
把 CSS 宣告寫成一行:閱讀 CSS 檔案的時候,大部分時間是用來尋找 CSS 標籤,為了使我們的生活好過些,請寫成單行,例如
1
h2 {font−size: 18px; border: 1px solid blue; color: #000; background−color: #FFF;}
而不是
1 2 3 4 5 6
h2 { font−size: 18px; border: 1px solid blue; color: #000; background−color: #FFF; }
-
分區段列出:Jonathan 習慣把 CSS 分為三個區段,第一個是直接的 CSS 標籤宣告,例如 body,一些連結的風格,這是一個很小的區段,主要用來設定全局預設值,除錯時可省卻不少工夫。第二部份是特定元件標籤的宣告,例如錯誤訊息的顏色等。最後一個區段才是實質內容,首先列出主要的「容器標籤」(container),然後把容器內的元件標籤縮排宣告,例如:
1 2 3 4 5 6 7 8
#content {float: left;} #content p { ... } #sidebar {float: left;} #sidebar p { … } #footer {clear: both;} #sidebar p { … }
-
只需支援最新的瀏覽器:即是說放棄對 IE 5.0 和 5.5 的支援,這可以省掉不少麻煩,也不用對應不同版本的瀏覽器便寫一個 CSS 檔案。當然,做這個決定前要考慮一下你的用戶的反應。
-
使用省略的語法:可能的情況下使用省略語法,例如:
1
margin: 5px;
而不是
1
margin: 5px 5px 5px 5px;
-
使用最短的選擇標籤:若果把宣告寫成 tr td { … },顯然有點多餘,因為 td 前面總有 tr。
-
保持簡潔:以上沒有提及的可以自行發揮,最主要的原則是保持 CSS 簡單、整潔、容易閱讀。