CSS 优化，提高性能的方法有哪些

html-css024

CSS 优化，提高性能的方法有哪些,第1张

CSS优化包括很多方面，写CSS很简单很容易，但是要想写出精炼的CSS代码还是有很多技巧的。随便讲一下，不对的地方多多指正：

1、避免过度约束

// 糟糕

ul#nav{..}

// 好的

#nav{..}

2、后代选择符最烂

// 烂透了

html div tr td {..}

3、避免链式（交集）选择符

// 糟糕

.menu.left.icon {..}

// 好的

.menu-left-icon {..}

4、使用复合（紧凑）语法

// 糟糕

.someclass {

 padding-top: 20px

 padding-bottom: 20px

 padding-left: 10px

 padding-right: 10px

 background: #000

 background-image: url(../imgs/carrot.png)

 background-position: bottom

 background-repeat: repeat-x

}

// 好的

.someclass {

 padding: 20px 10px 20px 10px

 background: #000 url(../imgs/carrot.png) repeat-x bottom

}

5、避免不必要的命名空间

// 糟糕

.someclass table tr.otherclass td.somerule {..}

//好的

.someclass .otherclass td.somerule {..}

6、避免不必要的重复

.someclass {

 color: red

 background: blue

 font-size: 15px

}

.otherclass {

 color: red

 background: blue

 font-size: 15px

}

// 好的

.someclass, .otherclass {

 color: red

 background: blue

 font-size: 15px

}

7、最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。

8、避免 !importants，其实你应该也可以使用其他优质的选择器。

9、尽可能精简规则，你可以进一步合并不同类里的重复的规则。

好吧，我就总结这9点吧，如果还有好的规则，请贴上来~~~

1、尽量避免行内样式和页面内嵌样式

2、减少CSS文件引用数量，生产环境压缩CSS文件。

3、初始化样式只对用到的标签，避免使用*{}。

4、避免对同一元素和类名多次重复定义某些属性，css代码能简写的尽量简写。

5、放弃对老旧浏览器支持，少写hack。