当我们面对网站项目里日益庞大的css,javascript文件,无论是为了二次开发还是浏览器解析,都应该优化他们的代码,但是优化并不意味着是简单的压缩或减小文件体积。条理清晰,运行效率高才是我们要的结果。那么有哪些手段能够我们的css代码呢?一起来看看下面的一些建议吧。
1.使用缩写
缩写能够缩短你的工作时间,减小你的文件体积,何乐而不为?
针对相近的不同设置不同的值:
view plaincopy to clipboardprint?
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
使用缩写:
view plaincopy to clipboardprint?
p { margin: 10px 20px 30px 40px; }
p { margin: 10px 20px 30px 40px; }
再来看看常用的font的缩写
查看 CSS Shorthand Guide (英) 和 Efficient CSS with shorthand properties (英) 了解更多关于缩写的属性。
2.避免使用Hack
Jon Hick的 blog hicksdesign.co.uk/journal 利用浏览器条件性注释
Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件!
下面来看看IE6使用条件性注释的代码范例:
view plaincopy to clipboardprint?
这段代码使得IE6去下载额外的ie6.css解析它专用的css代码。同样的,如果针对IE7只用把上面的6与7替换就行了。