对于css文件而言,选择器的写法有它的讲究,如——css
1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ......
对于属性值的写法也有他的讲究,如——node
1> 复合属性,如font、background、margin、padding等 2> 颜色、单位、hack、css3属性等 ......
你们每每忽略一点,即是属性的书写顺序。css3
来自http://mdo.github.io/code-guide/,它所提倡的css属性顺序以下——git
1> Positioning - 定位属性 2> Box-model - 盒模型属性 3> Typography - 排版属性 4> Visual - 视觉属性 5> Misc - 其余属性
具体的顺序,参见https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.jsgithub
官网:http://twitter.github.io/recess/,依赖于node及npm。npm
举一个例子,test.css中——less
.test { color: green; float: left; }
color是排版属性,float是盒模型属性,float应该在前。咱们用recess检测,会看到——ide
它会告诉你正确的属性应该是什么。它的断定标准,严格按照https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js而来。学习
固然,你也能够关掉这个功能,但不提倡,我的认为recess里面最大的魅力就在于可以检测属性顺序。ui
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属性顺序的编写,你们没必要在开发的过程中进行留意,能够在一键部署的环节中去作。从而提升样式的解析效率。
固然,你也能够经过更改里面的源码来获得你所须要的样式规则。再固然,主要是学习里面的设计思想,本身开发去知足本身的需求。