1.簡(jiǎn)化注釋語(yǔ)句
很多時(shí)候，為了增加可讀性，開(kāi)發(fā)人員會(huì)喜歡寫(xiě)多行注釋?zhuān)⑨屨Z(yǔ)句當(dāng)然沒(méi)有問(wèn)題，但在 CSS 中他們會(huì)增大 CSS 文件的大小，應(yīng)該嘗試簡(jiǎn)化。
這樣在保持可讀性的同時(shí)，減小了文件大小。事實(shí)上，在一個(gè)真正發(fā)布版本的 CSS 文件中，你完全可以去掉這些注釋。

2.簡(jiǎn)化顏色代碼
在 CSS 中，我們經(jīng)常會(huì)跟十六進(jìn)制顏色代碼打交道。很多人可能習(xí)慣于寫(xiě)成以下的語(yǔ)法格式：
color: #ffffff;
color: #ff88ff;
事實(shí)上，在 CSS 中是可以簡(jiǎn)化這個(gè)寫(xiě)法的，我們可以寫(xiě)成：
color: #fff;
color: #f8f;

3.使用單行屬性代替多行屬性
在 CSS 中像 margin/padding/font/border 等屬性均可以用一行來(lái)代替很多行設(shè)置，例如：
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
 我們可以寫(xiě)成：
padding: 10px 0;
對(duì)于其它縮寫(xiě)方法，可以參考網(wǎng)上一些資料。當(dāng)然，我更推薦使用 TopStyle 這款軟件在寫(xiě) CSS 的過(guò)程中學(xué)習(xí)，它會(huì)給出具體提示。

4.當(dāng)值為 0 時(shí)可省略掉單位
padding: 0;

5.同時(shí)設(shè)定多個(gè)元素的屬性
例如：
h1 {
    margin: 0;
    padding: 0;
}
h2 {
    margin: 0;
    padding: 0;
}
更贊的寫(xiě)法是這樣：
h1,h2 {
    margin: 0;
    padding: 0;
}

6.刪除空白和換行
這是個(gè)很不起眼的操作，但對(duì)于脫離了開(kāi)發(fā)階段，而要應(yīng)用在網(wǎng)絡(luò)上的 CSS 而言應(yīng)該進(jìn)行這樣的處理，舉個(gè)例子：
h1  {
    margin: 0;
    padding: 0;
}
應(yīng)該處理成：
h1{margin:0;padding:0;}
事實(shí)上，在 CSS 文件中可以不需要任何換行的。但是為了保持代碼那么一點(diǎn)點(diǎn)可讀性，我還是比較建議每個(gè)元素寫(xiě)成一行?，F(xiàn)在可以利用一些工具來(lái)進(jìn)行類(lèi)似的操作。

7.可刪減的選擇框架的樣式庫(kù)

很多時(shí)候，我們?cè)陂_(kāi)發(fā)的過(guò)程中，為了提高效率會(huì)去選擇框架或者組件快速的實(shí)現(xiàn)我們的效果，但是問(wèn)題來(lái)了，這樣直接引用的結(jié)果會(huì)導(dǎo)致很多樣式的冗余，我們?cè)谑褂玫倪^(guò)程中并不會(huì)全部用到樣式庫(kù)里的樣式，所以，我們應(yīng)該嘗試著去自定義框架或者組件的樣式庫(kù)，把沒(méi)有調(diào)用到的樣式刪除以此來(lái)減小我們 CSS 文件的大小。


本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://oisangadgets.com/ui