Web前端開發最佳實踐（8）：尚未給CSS樣式排序？其實你能夠更專業一些

前言

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等工具排序

附錄

• Web前端開發最佳實踐（1）：前端開發概述
• Web前端開發最佳實踐（2）：前端代碼重構
• Web前端開發最佳實踐（3）：前端代碼和資源的壓縮與合併
• Web前端開發最佳實踐（4）：在頁面中添加必要的meta信息
• Web前端開發最佳實踐（5）：正確閉合HTML標籤，中止使用不標準的標籤和屬性
• Web前端開發最佳實踐（6）：過期的塊狀元素和行內元素
• Web前端開發最佳實踐（7）：使用合理的技術方案來構建小圖標
• Web前端開發最佳實踐（8）：尚未給CSS樣式排序？其實你能夠更專業一些