标准化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属性顺序的编写，大家不必在开发的过程当中进行留意，可以在一键部署的环节中去做。从而提高样式的解析效率。

当然，你也可以通过更改里面的源码来得到你所需要的样式规则。再当然，主要是学习里面的设计思想，自己开发去满足自己的需求。