您当前位置:七彩分享网 >> 网站运营 >> 正文内容

层叠样式表CSS的书写顺序规范

2020/5/24 23:39:06 | 来自互联网:agui | 阅读 次 | 【字体:
摘要:规范的CSS写法,不仅仅是易于查看,更重要的是能加快网页加载代码,属于css样式优化的一种方式,对SEO也有促进作用。

这些年在工作中,发现很多前端设计在书写CSS时都是率性而为,每次写css样式都是用到什么就在样式表后添加什么,没有遵循一定的规范,更没有考虑到样式属性的书写顺序对网页加载代码的影响。俗话说:没有规矩,不成方圆。随意性造成了代码可读性极差,更导致了网站后期维护非常困难。

其实,规范的CSS写法,不仅仅是易于查看,更重要的是能加快网页加载代码,属于css样式优化的一种方式,对SEO也有促进作用。那么,层叠样式表CSS的书写规范和顺序到底是怎样的呢?

通过整理了一些网友的CSS技巧以及官方文档,结合自己实际操作中的测试结果,比较合理的CSS书写规范应该遵循如下的书写顺序:

(1)优先写定位属性,比如:position、display、z-index、clear、float、top  right、bottom、left、overflow等。

(2)其次写自身属性,比如:margin、padding、width、height、border、background等。

(3)接着写文字样式,比如:font-style、font-varient、font-weight、   font-size、line-height、font-family、color等。

(4)然后是文本属性,比如:text-align、text-indent、vertical-align、text-wrap、text-transform、text-decoration、letter-spacing、word-spacing、white-space、text-overflow等。

(5)最后是CSS3中新增属性及其它属性,比如:content、box-shadow、border-radius、transform、transition、animation等。

层叠样式表CSS的书写顺序规范

只要遵循以上的书写顺序,就能减少浏览器reflow(回流),提升浏览器渲染DOM的性能,因为浏览器的渲染流程为:

①解析html构建DOM树,解析css构建CSS树:将html解析成树形的数据结构,将css解析成树形的数据结构。

②构建render树:DOM树和CSS树合并之后形成的render树。

③布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义以及它们的从属关系,从而计算出每个节点在屏幕中的位置。

④绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。

CSS样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到CSS样式就立马开始解析的,而是根据CSS样式的书写顺序将之按照DOM树的结构分布render样式,完成第②步,然后开始遍历每个树节点的CSS样式进行解析,此时CSS样式的遍历顺序完全是按照书写顺序进行的。

在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染,比如按照这样的书写顺序:width: 300px;height: 300px;padding-left: 2.5em;position: absolute;……

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流,而之前却是按照普通元素进行解析的,所以不得不重新渲染,解除该元素在文档中所占位置,然而由于该元素的占位发生变化,其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示,影响了用户体验。

所以规范的CSS书写顺序对于文档渲染来说一定是事半功倍的!此外,还有一个会影响浏览器渲染性能的词汇叫“repaint(重绘)”。repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

注意:

1、render树的结构不等同于DOM树的结构,一些设置display:none的节点不会被放在render树中,但会在dom树中。

2、有些情况,比如修改了元素的样式,浏览器并不会reflow或repaint,而是把这些操作积攒一批,然后做一次reflow,这也叫做异步reflow。但在有些情况下,比如改变窗口,改变页面默认的字体等,对于这些情况,浏览器会马上进行reflow。

3、为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

关键词标签: CSS规范 网页设计 CSS技巧
上一篇美文: 淘宝电商运营应该要具备的十大能力
下一篇美文: 没有了


网友对【层叠样式表CSS的书写顺序规范】的评论: