標準化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屬性順序的編寫，你們沒必要在開發的過程中進行留意，能夠在一鍵部署的環節中去作。從而提升樣式的解析效率。

固然，你也能夠經過更改裏面的源碼來獲得你所須要的樣式規則。再固然，主要是學習裏面的設計思想，本身開發去知足本身的需求。