CSS写作建议和性能优化小结

CSS渲染规则

.nav h3 a { font-size: 14px; }

• 渲染过程: 首先找到所有的a，沿着a的父元素查找h3，然后再沿着h3，查找.nav。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素html都没有匹配，则不再遍历这条路径，从下一个a开始重复这个查找匹配（只要页面上有多个最右节点为a）

• CSS选择器从右向左匹配：从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面

嵌套层级不要超过 3 级

• CSS的元素嵌套层级不能超过3级，过度的嵌套会导致代码臃肿，冗余，导致CSS文件的体积变大，影响渲染的速度，而且过于依赖HTML文档结构。如果以后要修改样式，可能要使用!important覆盖。

样式级别

• !important > 行内样式 > ID 样式 > Class 样式 > 标签名样式
• 组合选择器使用权值会叠加的，ID 的权值是100，Class 是10，标签名是 1

inline-block 的边距解决方法

• 删除代码之前的空行空格
• 父元素font-size设置为0

图片要设置 width 和 height

• img很建议设置width和height。目的是为了在网速差或者其它原因加载不出图片的时候，保证布局不会乱

• PC 站：建议在img标签的属性设置width和height。这样避免加载不出 CSS 而错位；

• 手机站：建议用 CSS 设置img的width和height，因为手机站要做适配，在属性设置width和height不灵活，比如使用rem布局，在属性那里设置不了width和height；

• 如果图片不固定：但是有一个max-width和max-height，那么建议在img的父元素设置width和height。img根据父元素的width和height设置max-width和max-height。

任意元素垂直居中

• table-cell：

• flex (过于简单，忽略)

• position， transform

• position margin

这个方式不推荐使用，因为这个写法，.div2的宽高必须要设置，否则就是 100%，比如设置了top:0;bottom:0;效果和设置height:100%;是一样的。如果想要避免，就必须要设置height。

图片预加载

• 懒加载：页面加载的时候，先加载一部分内容（一般是先加载首屏内容），其它内容等到需要加载的时候再进行加载。
• 预加载：页面加载的时候，先加载一部分内容（一般是先加载首屏内容），其它内容等到先加载的一部分内容（一般是首屏内容）加载完了，再进行加载。

慎用 * 通配符

• 通配符代码少，但是性能差，因为渲染的时候，要匹配页面上所有的元素

CSS 在 head 引入

• 浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面。在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 HTML 内容加载完成，这样一来，用户看到页面的时间会更晚。

避免使用 @import

• @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时。而且多个@import可能会导致下载顺序紊乱。

不要在 ID 选择器前面进行嵌套或写标签

• ID 在页面上本来就是唯一的，而且人家权值那么大，前方嵌套（.content #test）完全是浪费性能，以及多写一些没有意义的代码。这个虽然是一句话，但是还是有人犯这样的错。
• 除了嵌套，在 ID 的前面也不需要加标签或者其它选择器。比如div#test或者.test#test。这两种方式完全是多余的，理由就是 ID 在页面就是唯一的。前面加任何东西都是多余的！

CSS3 动画的优化

• CSS3 动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top；
• 动画和过渡能用CSS3解决的，就不要使用JS。如果是复杂的动画可以使用CSS3+JS（或者HTML5+CSS3+JS）配合开发