首先说一下书写的样式规则
因为在代码足够多之后,css也会变得不好维护,所以有了按照一定顺序书写样式规则的想法。在网上搜索了一圈之后,发现并没有让我比满意的代码规范,所以,自己给自己制定一套。
- 总体来说就是将,回流事件放在上方,将重绘事件放在下方,中间用一个空行隔开。
- 回流事件顺序:1.position相关 或 display相关 (都有的话position先写,display后写) 2.宽高 3.margin,padding 4.font相关回流事件(fontsize,white-space) 5.lineheight 6.border相关回流
- 重绘事件顺序:1.background相关 2.color相关
- transition相关,与transform相关放在最后。(transform事件并不会触发回流,仅仅是视图层面的改变,而transition是否触发回流要看改变的是什么,如果变化的内容是重绘事件,那么transiton每时每刻知道结束,触发的都是重绘事件,如果变化的内容是回流事件,那么每时每刻都会触发回流!很影响性能)
-
如图所示:
Snipaste_2018-02-06_22-39-31.png
附:回流事件区分原则
添加或者删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
页面渲染初始化（无法避免）
浏览器窗口尺寸改变
