前言
CSS樣式排序是指按照一定的規則排列CSS樣式屬性的定義，排序並不會影響CSS樣式的功能和性能，只是讓代碼看起來更加整潔。CSS代碼的邏輯性並不強，一般的開發者寫CSS樣式也很隨意，所以如果不借助工具，不太容易按照既定的順序來定義CSS屬性，這是前端程序員很少給CSS樣式屬性排序的最主要原因。
盡管給CSS樣式屬性排序需要花費一些精力，但從代碼的可讀性和可維護性角度來考慮，這些付出還是值得的。如果CSS屬性按照一定的規則排序，在開發過程中可以防止屬性的重復定義，代碼的檢查者也能很清晰地查看CSS樣式定義，更關鍵的是后續維護過程中能快速定位特定的樣式屬性。國外有人做過一個調查，該調查顯示有超過60%的開發者會給CSS樣式排序。可見業內大部分的開發者對CSS樣式屬性排序持有肯定的態度，只是在排序的方式上會有一定的分歧：大約有45%的人是按照類型分組排序，有14%的人是按照字母序排列，還有2%的人按照定義的長度排序。下面分別介紹這幾種排序的方式以及其優缺點。
常見的CSS定義排序方式
1. 按類型分組排序
這種排序方式最復雜，卻也是最合理的方式。國外著名的Web前端專家Andy Ford推薦過一種按照類型分組排序的方式，他把CSS屬性分為7大類：顯示與浮動（Diplay&Flow）、定位（Positioning）、尺寸（Dimensions）、邊框相關屬性（Margins、Padding、Borders、Outline）、字體樣式（Typographic Styles）、背景（Backgrounds）、其他樣式（Opacity、Cursors、Generated Content）。以此規則，Andy Ford給出了一個例子，基本包含了CSS2.1中所有的樣式屬性。可以通過瀏覽他的文章 查看完整的例子代碼。
隨着CSS3的普及，CSS樣式中也添加了很多新的屬性，這些新的屬性也可以按照如上的規則歸類到不同的類別中，如：text- shadow可以歸類到字體樣式中；border-radius可以歸類為邊框相關屬性等。
2. 按字母序排列
按字母序排列的方式也是CSS排序中使用較多的一種方式。相比較於前一種方式，這種方式的優點是排列規則簡單。按字母序排列的規則是按照屬性的首字母從A到Z排列，忽略瀏覽器前綴（如：-webkit-、-moz-、-o-以及-ms-）。如下是一個按照字母序排列的例子：
#element {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #FFF;
font-family: "Times New Roman", serif;
font-weight: bold;
height: 300px;
line-height: 20px;
top: 10px;
width: 100px;
}
3. 按定義長度排序
這種排序方式是使用較少的一種方式。和按照字母序排列的方式類似，這種方式是按照樣式定義的字符長度排列。排列的方式可以從長到短，也可以是從短到長。如下的例子將按照定義由長到短排列：
#element {
font-family: "Times New Roman", serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
line-height: 20px;
height: 300px;
width: 100px;
color: #FFF;
top: 10px;
}
以上三種常見的CSS排序方式中，第一種最為合理，代碼的可讀性和可維護性也是最好的，但是規則相對復雜。其余兩種方式規則簡單，但僅僅是讓代碼看起來更整潔，並沒有提高多少代碼的可維護性。在實際的應用中，推薦使用第一種排列方式。
借助工具
當然，如果純粹是靠前端工程師在編寫代碼過程中按照一定的規則來排列CSS樣式肯定是有難度的，並且也不方便頻繁地修改代碼。最佳的方式是在編寫代碼過程中按照最有效率的方式來編寫，在編寫完成並提交代碼時使用工具給CSS排序。這樣即提高了開發效率又方便了后續代碼的閱讀和維護。推薦一款免費的CSS排序工具：CSScomb 。CSScomb提供了在線工具及主流代碼編輯器的插件。
CSScomb的排序方式類似如上的第一種方式，但是默認規則稍有不同，當然CSScomb容許開發者自定義排序方式。下面以WebStorm為例，演示CSScomb的使用方法以及效果對比。
下載的CSScomb工具包，根據教程安裝插件到WebStorm，然后就可以直接使用CSScomb了。使用的方式也很簡單，在CSS樣式文件上點擊右鍵選擇CSScomb工具，如下圖所示。
圖 WebStorm編輯器中使用CSScomb插件
看看排序的實際效果。如下是排序前的代碼片段：
圖 示例樣式代碼片段
下圖是排序后的代碼片段。
圖 示例樣式代碼經過CSScomb排序后的效果
可以看到，排序后，不只是樣式定義的順序改變，每個分組之間還用了一個空行分割。提高了CSS代碼的可讀性和可維護性。
CSScomb提供了大量的其他工具的集成解決方案，如grunt對應的有grunt-csscomb，sublime編輯器有對應的sublime-csscomb插件，等等。
總結
總結以上介紹的CSS樣式規則排序的實踐，可以歸納為如下四點：
- 給CSS樣式排序
- 推薦按樣式屬性功能分組排序
- 推薦在CSS樣式代碼編寫完成並准備簽入的時候排序
- 使用如CSScomb等工具排序