前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Css样式书写顺序

Css样式书写顺序

作者头像
wade
发布2020-04-23 17:18:07
8620
发布2020-04-23 17:18:07
举报
文章被收录于专栏:coding个人笔记

我不知道是否有人严格按照一定的顺序来书写css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性书写的顺序对性能有什么影响。

我一直坚信,前端的性能优化都是从细节堆出来的,不注意css属性的顺序确实也可以实现我们需要的各种操作,但是慢慢的让自己遵从最优的写法,提高自己或者是优秀自己还是有必要的。

讲顺序之前,我们先要知道浏览器渲染页面的过程,之前有写过一篇文章了,这边简单提一下:

1.解析HTML构建DOM树

2.解析CSS构建CSSOM树

3.将DOM树和CSSOM树合并构建render树

4.布局

5.绘制

6.重排reflow

7.重绘repaint

整体来说,页面渲染初始过程涉及到2、3、4,我们推荐的书写顺序是这样的:

位置属性:position display float left top right bottom overflow clear z-index

尺寸(自身)属性:width height padding border margin

文字属性:font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow

背景:background、border等

css3中新增属性:content box-shadow border-radius transform等

这样比较不好理解,我们讲一些例子

代码语言:javascript
复制
span{
  width: 200px;
  height: 300px;
  background: red;
  font-size: 20px;
  color: #fff;
  left: 10px;
  position: absolute;
}

初始化渲染的时候,解析到了position之后,发现元素脱离文档流了,之前解析是按照static去解析的,又要回头重新解析。

代码语言:javascript
复制
span{
  width: 200px;
  height: 300px;
  background: red;
  font-size: 20px;
  color: #fff;
  display: block;
  margin: 20px;
}

当这个样式解析的时候,一开始按照普通行内元素解析,解析到了display之后,需要回头重新按照块级元素解析,之后解析到margin之后,触发了位置的变更,进行重排。

简单说就是位置和尺寸会涉及重排,颜色等会涉及重绘,初始化过程中我们当然是尽量避免重排和重绘,所以按照顺序书写css样式,有助于性能的优化,页面的渲染。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档