原文 |via： 9 Tips to Smaller & Optimized CSS Files
作者|Author：Stefan Vervoort
翻譯|Trans： Luc
由於CSS檔案載入於網頁的頭部，所以每位訪客都會下載這些檔案。我們會對PHP檔案、圖片進行最佳化，而往往忽略了CSS檔案。今天我們應該思考這個問題並做點什麼。
可以使用CSS optimizers 來優化CSS, 但是我認為如果你使用下面提到的技巧編寫程式碼時，效率和能力都會提高。
優化CSS檔案還能節省流量同時提高頁面載入速度。
1. 註解編寫CSS時註解顯得格外有用，這樣協同工作的同事就會理解程式碼的意思。註解方法有多種，你可以使用以下方法：
/*-------------------*/
/*-----Comment-------*/
/*-------------------*/
同樣也可以使用下面的方法：
/*Comment*/
這樣可以節省20個字符，假設有15個註釋，那麼就能節省300個字符。
2. 縮寫顏色代碼顏色代碼用HEX codes定義，它包含6個字符，但是一些情況下可以使用3個字符代替。看下面的例子：
div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */
3. 合併元素例如，如果有一堆h2 h3 和h4這樣的元素，而他們都有相同的屬性，只有個別屬性不同，那麼就可以按如下方法書寫：
h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{ font-size:1.2em; }
h3{ font-size:1.1em; }
h4{ font-size:1em; }
這樣就合併了相同屬性的元素，同時也宣告了不同的字體大小屬性。能節省大量的空間。
4. 值為0時省略Out Px/Em/%
0並不需要Px，Em和百分號。當你的值為0時（我想你會用到），省略單位能節省一倍的字元。
div{ padding: 0px 5px 5px 10px; }
/* 簡寫: padding: 0 5px 5px 10px; */
5. 合併屬性一些屬性如padding, margin 與border可以分開寫。例如：padding-top, padding-right, padding-bottom 和padding-left。
如果可能，合併之，即容易編寫又節省空間。
div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }
/* 簡寫: padding:50px 4px 23px 0; */
如果上下值相同，左右值相同，可以這麼寫：
div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* 簡寫: padding:5px 0; */
6. 明智的選擇Classes/ID
選擇的Classes,ID名稱盡量簡短、易懂，有意義。
避免選擇諸如“HeaderMiddleLeftCategories”這樣的名稱，可以用“h-cats“代替。這樣能節省大量的字元。
7. 清理CSS檔案以節省空間用CSS建站時，寫好的程式碼可能會起作用，也可能不起作用，還佔用著不少的空間。應通篇檢查CSS檔案中的錯誤與無效代碼以節省空間。
8. 刪除選擇器中最後一個屬性的分號這是我在使用CSS compressor 發現的技巧，看看這個範例：
body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */看到了嗎，我刪除了最後一個分號。也許效果不明顯，但是積少成多啊，50個選擇器就是50個字元。
9. 刪除沒用的空格與回車可能你會刪除所有的空格與回車，因為他們會佔據一個字元。但這樣做的問題是破壞了CSS的結構，降低了可讀性。
我在優化CSS檔案時通常不這麼做，因為結構對我來說更重要。這裡有一個摺疊的辦法，在網站上使用不含回車與空格的文件。而本地保存含回車與空格的文件，這樣編輯起來就很方便了。
結語如果想全面優化CSS文件，我建議使用CSS compressor，這樣你能自己學到上面這些技巧，也能提高編寫速度與CSS程式碼的品質。
如果你又其他的技巧，那麼，歡迎留言。