标准化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属性顺序的编写，大家不必在开发的过程当中进行留意，可以在一键部署的环节中去做。从而提高样式的解析效率。
当然，你也可以通过更改里面的源码来得到你所需要的样式规则。再当然，主要是学习里面的设计思想，自己开发去满足自己的需求。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
