精简CSS代码_html/css_WEB-ITnose

精简CSS代码可以帮助减小样式文件的大小，使代码清晰，方便维护。

使用简写属性及默认值

div { background-color: rgba(0,0,0,.3); opacity: .9;} 

不过对于其它可能大于1的浮点值来说，也许会让其他人以为你是忘记了小数点前面的数，

transition: all .5s; 

去掉ID选择器前面的限定符

ID本来就是唯一的，在前面加上元素限定和祖先元素通常情况下都是没有意义的，

.container div#box { }/* 精简后 */#box { } 

下面的内容多多少少有点喜新厌旧的意思了

去掉老旧浏览器兼容代码

body { text-align: center;}.container { margin: 0 auto; text-align: left; width: 960px;}/* 上面的代码是为了实现怪异模式下的 IE 以及 IE5.x 的块元素居中效果 */.container { margin: 0 auto; width: 960px;} 

请始终使用标准模式，如今IE6/7/8 都要面临淘汰了。

去掉多余的浏览器前缀

还在你的CSS代码中写一大堆浏览器厂商前缀吗？那你就out了！

.header { -webkit-border-radius: 5px; -moz-border-radius: 5px; /* 1 */ -ms-border-radius: 5px; /* 2 */ -o-border-radius: 5px; /* 3 */ border-radius: 5px;}/** * 1.新版本的 Firefox 已经不再支持 -moz-border-radius 属性， * 同时，从 Firefox 4.0 就开始支持标准的 border-radius 写法了。 * 2.IE 9+ 支持标准的 border-radius 写法，IE 8 及更低版本什么写法都不支持。 * 3.Opera 10.50+ 支持标准的 border-radius 写法 * 换芯后的 Opera 同时还支持 -webkit-border-radius 写法 */.header { -webkit-border-radius: 5px; border-radius: 5px;}/* 更进一步 */.header { border-radius: 5px; /* 4 */}/** * 4.另外 Android 2.1+, iOS 4.0+, Safari 5+ 均支持标准 border-radius 写法 */ 

可以使用 Sass 定义一个 Mixin 来完成这件事情，

@mixin border-radius($radius) {  -webkit-border-radius: $radius; border-radius: $radius;}.header { @include border-radius(5px);} 

用 Less 同样，

.border-radius(@radius) {  -webkit-border-radius: @radius; border-radius: @radius;}.header { .border-radius(5px);} 

将常用的 CSS3 属性全部封装成 Mixin，既可以减少代码量，也可以很好地控制哪些浏览器前缀应该去掉，而哪些应该保留，当某个前缀不再需要的时候可以很轻松地删掉，更多资料请参考 http://css3please.com/，在这里你可以更清楚地看到某个属性需要哪些浏览器厂商前缀，也可以参考使用以下项目，都有很成熟的 Mixins 供使用，

查看更多关于精简CSS代码_html/css_WEB-ITnose的详细内容...