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。