mozilla中建议的css属性书写顺序

最近看了好多关于reflow的问题，原来没有注意到过这个现象，最近开始慢慢的研究下，毕竟从前对于很多性能方面的细节没有注意到。关于reflow应该简单的说就是dom的渲染吧（通过CSS或者其他因素计算文档树中每个对象的大小、布局等），也许解释的片面点，但是先定义一个简单的概念，方便理解。

首先是看到了mozilla中建议的css属性书写顺序，文章是从资料看到的，这个书写顺序不但是因为项目的开发代码规范标准，也因为合理的书写顺序更符合了浏览器的渲染的顺序。

mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content

这篇《形象化的reflow》很真的是形象的指出了浏览器的渲染过程，从中你可以看到浏览器在加载的过程中并不是一步到位的把所有的dom一次的放置正确，而是在不断的计算后频繁的改变渲染结果，这其中包括了js、css等对dom表现的影响。