性能优化 - 你知道CSS有哪些优化方案吗

难度级别：中高级及以上                               提问概率：70% 

CSS是前端开发工作中必不可少的技能之一，同时也是网页开发中必不可少的重要元素之一。但很多人所开发的项目本身对性能要求并不高，再加上项目周期紧张，久而久之，也就容易养成不考虑细节的习惯，觉得CSS无非就是做一些布局性的工作。那么如果从性能优化的角度考虑，有哪些细节和方案需要注意呢，一起来看一下吧。

1 CSS属性要按顺序编写

很多人在编写CSS属性的时候，并没有一定的顺序逻辑性，想到哪里就写到哪里，类似蓝湖这些设计工具会带有一定的CSS代码，所以很多人先从工具中复制CSS代码，再补充自己需要的一些属性，这样其实是不对的。CSS属性编写应该按照定位、盒模型、可视属性、其他属性的顺序来编写，就像这样

CSS代码：

.box {
/* 定位相关属性 */
position: absolute;
top: 0;
right: 0;
z-index: 1;
/* 盒模型相关属性 */
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
/* 可视属性相关 */