標准化css屬性順序

前言

對於css文件而言，選擇器的寫法有它的講究，如——

1> 不要用ID選擇器
2> 不要用通配符*選擇器
3> 選擇器的層級
......

對於屬性值的寫法也有他的講究，如——

1> 復合屬性，如font、background、margin、padding等
2> 顏色、單位、hack、css3屬性等
......

大家往往忽略一點，便是屬性的書寫順序。

來自http://mdo.github.io/code-guide/，它所提倡的css屬性順序如下——

1> Positioning - 定位屬性
2> Box-model - 盒模型屬性
3> Typography - 排版屬性
4> Visual - 視覺屬性
5> Misc - 其他屬性

具體的順序，參見https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js

使用recess實現css屬性順序重置

官網：http://twitter.github.io/recess/，依賴於node及npm。

舉一個例子，test.css中——

.test {
    color: green;
    float: left;
}

color是排版屬性，float是盒模型屬性，float應該在前。我們用recess檢測，會看到——

它會告訴你正確的屬性應該是什么。它的判定標准，嚴格按照https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js而來。

當然，你也可以關掉這個功能，但不提倡，個人認為recess里面最大的魅力就在於能夠檢測屬性順序。

OK，我們向前一步，現在呢，我不想進行語法檢測，我直接將這個test.css文件，編譯之后，輸出我期望的屬性順序的css文件（我這里命名為test-product.css）。那么鍵入如下命令——

recess [path to old file] --compile > [path to new file]

對應的結果——

.test {
    float: left;
    color: green;
}

其他

當然，recess能做的事情不止於此，它的詳細介紹，可以看看http://www.sitepoint.com/optimizing-css-stylesheets-recess/，如對less編譯的支持，壓縮，jslint檢測規則的添加等，都還不錯。

總之，對於css屬性順序的編寫，大家不必在開發的過程當中進行留意，可以在一鍵部署的環節中去做。從而提高樣式的解析效率。

當然，你也可以通過更改里面的源碼來得到你所需要的樣式規則。再當然，主要是學習里面的設計思想，自己開發去滿足自己的需求。