电脑技术学习

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

dn001

最近看了好多关于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表现的影响。