有用的 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 簡單、整潔、容易閱讀。