前言
提高網站整體加載速度的一個重要手段就是提高代碼文件的網絡傳輸速度。之前提到過，所有的代碼文件都應該是經過壓縮了的，這可提高網絡傳輸速度，提高性能。除了壓縮代碼之外，精簡代碼也是一種減小代碼文件大小的手段。以下將討論CSS代碼相關的代碼精簡方案。
定義簡潔的CSS規則
CSS的每條規則中都包含了規則的屬性及屬性值。定義簡潔的CSS規則主要是指合並相關規則和定義簡潔的屬性值。
1. 合並相關CSS規則
CSS中的某些樣式是由多個規則組成的，比如字體樣式，就包含：font-family、font-style、font-size、font-variant、font-weight及line-height。如下是使用這些規則定義一個元素的字體樣式：
p.reader-title {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 30px;
}
其實，這些字體相關的樣式規則可以合並為一個樣式規則，即font樣式。如下是合並后的樣式：
p.reader-title {
font:italic bold 12px/30px Georgia, serif;
}
合並后的樣式更簡潔，代碼量縮減了很多。類似的樣式還有：background、border、margin、padding、text、list-style、transform、transition、animation等。可以在CSS規范中查看各樣式對應的子規則。
2. 定義簡潔的屬性值
在CSS樣式中，有些屬性值可以使用更簡潔的方式來展示，比如顏色和尺寸：
p.reader-title {
color: #FFFFFF;
font-size: 0.8em;
padding: 0em;
}
顏色值#FF33EE可以簡化為#F3E，尺寸值0.8em可以省略小數點之前的0，即簡化為.8em。如果尺寸值為0，則可以省略單位。經過簡化后，上面的樣式定義即為：
p.reader-title {
color: #F3E;
font-size: .8em;
padding: 0;
}
合並相同的定義
很多時候在CSS代碼中，定義的規則會有相同的部分。可以合並這些相同的樣式定義，達到代碼重用和縮減代碼的目的。比如如下的CSS代碼：
.library-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #FFF;
font-size: 1.2em;
line-height: 2em;
}
.search-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #FFF;
font-size: 1.4em;
line-height: 2.5em;
}
以上的代碼中，定義了兩個CSS規則，這兩個規則中大部分的定義是相同的，在這種情況下，即可合並定義這些相同部分，優化后的代碼如下：
.library-title,.search-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #FFF;
}
.library-title {
font-size: 1.2em;
line-height: 2em;
}
.search-title {
font-size: 1.4em;
line-height: 2.5em;
}
在CSS中，有些屬性是可以繼承的，比如color、font、line-height、list-style、text-align、text-indent、text-transform 等。如果某個父元素的多個子元素上設置了相同的可繼承屬性定義，則可以把相同的定義合並，且設置在父元素上。在網頁設計中常見的問題是在CSS代碼中字體設置混亂，並且會重復設置相同的字體。一般情況下，同一個網頁中會有一個主要的字體，只需要把這個主字體設置在網頁的body標簽上即可。個別子元素的字體和主字體不同，則單獨定義即可覆蓋主字體。
刪除無效的定義
CSS代碼中的無效定義，並不會影響頁面的功能展示，但會影響頁面展示的性能。無效的定義在增加代碼量的同時，也增加了瀏覽器對樣式的解析時間，瀏覽器會根據CSS樣式構建樣式樹，樣式樹中當然也包括了無效的樣式。
無效的定義包括無效的規則及無效的樣式屬性。無效的規則一般是在開發過程中引入的，比如，在開發過程中，失效的CSS規則並沒有得到及時的刪除，而從直觀上無法判斷某個CSS規則是否已經失效，這應該也是CSS規則沒有被刪除的原因之一。對於這種情況，可以使用工具來進行查找，比如，用Chrome瀏覽器自帶的開發工具就可以查找CSS代碼中的無效樣式，如下圖所示。
圖 使用Chrome瀏覽器自帶的開發工具查找無效樣式規則的結果圖
當然，查找的結果只能作為參考，因為很多時候CSS規則對應的模塊並沒有加載，或者有些元素上的CSS類是通過JavaScript代碼動態設置的，這需要在刪除規則時仔細考慮。
無效的樣式屬性指的是設置的樣式並沒有起作用。比如設置內邊距為負值等，以及一些因手誤引起的屬性值拼寫錯誤等。如下是一些常見的無效樣式屬性：
.invalid-css {
padding-top:-20px;/* 無效的屬性值 */
border: 1px soild #DDD;/* 拼寫錯誤 */
}
同樣，使用Chrome自帶的開發工具可以檢測無效的屬性定義，下圖是使用此工具的一個檢測結果。
圖 使用Chrome瀏覽器自帶的開發工具查找無效樣式屬性及屬性值的結果圖
使用此工具需要注意的是，工具檢測時列出了Chrome無法識別的CSS屬性或者選擇器，某些屬性或者選擇器是為其他瀏覽器添加的，並不是真正的無效定義，比如以上圖中的選擇器input:-ms-input-placeholder等。