一些css的好習慣

  1、頁面上用到的一些背景圖片，如果是一些比較小的圖片，應該把他們合成到一張圖片上，然後通過background-position來設定背景圖片的位置。

     這樣做的好處是：

            a、一張圖片的大小會比很多張分散的圖片小

               
b、這樣可以一次載入完圖片，比如你做按鈕的普通和hover狀態時，如果用兩張圖片，那麼在一些瀏覽器下，hover的時候明顯有一個空白再切換圖片的過程，這樣是無法滿足我們的要求的。而如果合成一張圖片，通過background-position就不會有這種問題了。

                 c、如果多個css樣式都會用到合成的圖片，那麼最後將它們放到一起來設定它們的背景圖片。如div1,div2{background:url(..),no-repeat;}IE6下不會緩衝圖片，這樣的話就避免了每次讀到一個樣式的時候都要重新載入同一張圖片

      最主要的好處就是：減少瀏覽器與伺服器之間的通訊次數

 

  2、寫css樣式的時候，最好按照如下順序書寫

（display|list-style|position|float|clear等顯示內容）->

（width|height|margin|padding|border|background等自身屬性，盒模型樣式）->

（color|line-height|font|text-decoration|text-align|vertical-align|white-space|other|text|content等文字屬性）
。

    當然並不代表非得按這個順序寫，但這種寫法可以使css結構更清晰易讀，修改起來比較方便。而且在Team 專案中能更好地提高效率。

 
  ps:這種寫法由Mozilla工程師推薦，先寫顯示內容，再寫自身屬性，再寫文字屬性，可以使css結構更清晰易讀，修改起來比較方便。另外對渲染效能也有好處。

出處：原文