有用的 CSS 提示

Jonathan Snook 根據他個人經驗和習慣,總結了一些有用的 CSS 提示,包括是否應該使用像素作為字型大小的單位、把 CSS 宣告寫成單行、適當地縮排、只需支援最新的瀏覽器等等,這些提示很大程度上是 Jonathan 的個人偏好,正如他自己說:「我希望把我在 CSS 上的工作習慣與大家分享,但我必須提醒你,這裡所說的可能很有爭議性,但不活在危機之中生命有甚麼意義呢?(對的,當 CSS 被視為「危機」的時候,我的確活得很刺激。)」

Jonathan 的提示包括:

  • 用像素作為字型大小的單位:為了廣大 IE 的使用者,由於 IE 不懂得調節字型大小,請不要用像素作為字型大小的單位
  • 把 CSS 宣告寫成一行:閱讀 CSS 檔案的時候,大部分時間是用來尋找 CSS 標籤,為了使我們的生活好過些,請寫成單行,例如
    h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}     
    而不是
    h2 {
    font-size:18px;
    border:1px solid blue;
    color:#000;
    background-color:#FFF;
    }
  • 分區段列出:Jonathan 習慣把 CSS 分為三個區段,第一個是直接的 CSS 標籤宣告,例如 body,一些連結的風格,這是一個很小的區段,主要用來設定全局預設值,除錯時可省卻不少工夫。第二部份是特定元件標籤的宣告,例如錯誤訊息的顏色等。最後一個區段才是實質內容,首先列出主要的「容器標籤」(container),然後把容器內的元件標籤縮排宣告,例如:
    #content {float:left;}
    #content p { ... }

    #sidebar {float:left;}
    #sidebar p { ... }

    #footer {clear:both;}
    #sidebar p { ... }
  • 只需支援最新的瀏覽器:即是說放棄對 IE 5.0 和 5.5 的支援,這可以省掉不少麻煩,也不用對應不同版本的瀏覽器便寫一個 CSS 檔案。當然,做這個決定前要考慮一下你的用戶的反應。
  • 使用省略的語法:可能的情況下使用省略語法,例如:
    margin: 5px;
    而不是
    margin: 5px 5px 5px 5px;
  • 使用最短的選擇標籤:若果把宣告寫成 tr td { ... },顯然有點多餘,因為 td 前面總有 tr。
  • 保持簡潔:以上沒有提及的可以自行發揮,最主要的原則是保持 CSS 簡單、整潔、容易閱讀。

發表新回應

  • Images can be added to this post.

更多關於格式化選項的資訊

Captcha
以下問題用來確認閣下是一個真人,防止機器人濫發垃圾文章。