9个精简优化CSS文件的技巧

【 tulaoshi.com - Web开发 】

　　由于CSS文件加载于网页的头部，所以每位访问者都会下载这些文件。我们会对PHP文件、图片进行优化，而往往忽略了CSS文件。今天我们应该思考这个问题并做点什么。

　　可以使用 CSS optimizers 来优化CSS, 但是我认为如果你使用下面提到的技巧编写代码时，效率和能力都会得到提高。

　　优化CSS文件还能节省流量同时提高页面加载速度。

　　1. 注释

　　编写CSS时注释显得格外有用，这样协同工作的同事就会理解代码的含义。注释方法有多种，你可以使用如下方法：

　　/*-------------------*/

　　/*-----Comment-------*/

　　/*-------------------*/

　　同样也可以使用下面的方法：

　　/*Comment*/

　　这样能节省20个字符，假设有15个注释，那么就能节省300个字符。

　　2. 缩写颜色代码

　　颜色代码用HEX codes定义，它包含6个字符，但是一些情况下可以使用3个字符代替。看下面的例子：

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */

3. 合并元素

　　例如，如果有一堆h2 h3 和 h4这样的元素，而他们都有相同的属性，只有个别属性不同，那么就可以按如下方法书写：

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{　　font-size:1.2em; }
h3{　　font-size:1.1em; }
h4{　　font-size:1em; }

这样就合并了相同属性的元素，同时声明了不同的字体大小属性。能节省大量的空间。

　　4. 值为0时省略Out Px/Em/%

　　0并不需要Px，Em和百分号。当你的值为0时（我想你会用到），省略单位能节省一倍的字符。

　　div{ padding: 0px 5px 5px 10px; }

　　/* 简写: padding: 0 5px 5px 10px; */

　　5. 合并属性

　　一些属性如padding, margin 与border可以分开写。例如：padding-top, padding-right, padding-bottom 和 padding-left。

　　如果可能，合并之，即容易编写又节省空间。

div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }
/* 简写: padding:50px 4px 23px 0; */

　　如果上下值相同，左右值相同，可以这么写：

div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* 简写: padding:5px 0; */

　　6. 明智的选择Classes/ID

　　选择的Classes,ID名称尽量简短、易懂，有含义。

　　避免选择诸如“HeaderMiddleLeftCategories”这样的名称，可以用“h-cats“代替。这样能节省大量的字符。

　　7. 清理CSS文件以节省空间

　　用CSS建站时，写好的代码可能起作用，也可能不起作用，还占用着不少的空间。应通篇检查CSS文件中的错误与无效代码以节省空间。

　　8. 删除选择器中最后一个属性的分号

　　这是我在使用CSS compressor 发现的技巧，看看这个例子：

body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */

　　看到了吗，我删除了最后一个分号。也许效果并不明显，但是积少成多啊，50个选择器就是50个字符。

　　9. 删除没用的空格与回车

　　可能你会删除所有的空格与回车，因为他们会占据一个字符。但这样做的问题是破坏了CSS的结构，降低了可读性。

　　我在优化CSS文件时通常不这么做，因为结构对我来说更重要。这里有一个折中的办法，在网站上使用不含回车与空格的文件。而本地保存含回车与空格的文件，这样编辑起来就很方便了。

　　结束语

　　如果想全面优化CSS文件，我建议使用CSS compressor，这样你能自己学到上面这些技巧，也能提高编写速度与CSS代码的质量。

　　如果你又其他的技巧，那么，欢迎留言。