笔者经过5年的网站开发经验，了解到网站运行的规律，网站代码越小越精简越好，运行速度也就越快，那么怎样才能使网站代码越小越精简呢？下面我就举几个简单的例子，把平时接触到的例子给大家分享一下。
先看下面一段冗余的CSS代码：
#header {
padding-top:10px;
padding-right:15px;
padding-bottom:10px;
padding-left:15px;
backgroung-color:#333333;
background-images:url(../Images/header.jpg);
}
这样的一段冗余的CSS代码，在条理上很清晰，结构也很明了，可读性很强，可是这样的一段冗余的CSS代码却没有做到精简，也就是说它是最原始的CSS代码，下面看精简后的CSS代码：
#header {
padding:10px 15px;
backgroung:#333 url(../Images/header.jpg);
}
这样代码就更小更精简了。
------------------
在CSS中有复合属性这一说法，也就是说可以将很多属性参数整合在一起的，比如说上面的“padding-top; padding-right; padding-bottom; padding-left;”可以整合成一个“padding”属性，然后为其配上参数。
通过这一点，我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理，可读性也同样强。可是对于要精简到彻底来说，这还不够。为了让这段CSS代码的结构明了，我们用上了空格换行等占用空间的东西，如果将这些占用空间的去掉呢？
#header{padding:10px 15px;background:#333 url(../Images/header.jpg);}
只这一句就替代了上面的一段代码，这样代码就已经精简到了最大化，当然，并不推荐所有人都这样写，这样写的CSS代码在可读性上要远远差于段落式的写法，除非你对自己写的代码有完全掌握的信心。
在同一个站点的CSS文件中，不可避免的会出现不同的ID或Class却有一部分相同的属性，如果将这些ID或Class逐个分开来写的话，在CSS文件里无疑会生成重复代码，而我们要尽量的精简CSS文件的大小，那么“消灭”这部分重复的代码就变得势在必行。
看下面一段CSS代码：
#header{margin:10px 15px;background:#333 url(../Images/header.jpg);}
#content{margin:10px 15px;padding:10px;background:#999;}
#copyright{margin:10px 15px;border:1px solid #f00;}
在上面的三个ID中都有一个相同的属性“margin:10px 15px;”，如果就这样分开来写的话，这三个ID之间将保持各自独立的关系，但却生成了重复的代码，而我们可以将其写成如下格式：
#header,#content,#copyright{margin:10px 15px;}
#header{background:#333 url(/Images/header.jpg);}
#content{padding:10px;background:#999;}
#copyright{border:1px solid #f00;}
将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话，难免会造成代码可读性降到很低很低，所以除此之外当具有相同属性的都是Class时还有另外的一种写法：
.main{margin:10px 15px;}
.header{background:#333 url(/Images/header.jpg);}
.content{padding:10px;background:#999;}
.copyright{border:1px solid #f00;}
当然这种写法时，调用时的写法也与平常不一样。
<div class="header main"></div>
<div class="content main"></div>
<div class="copyright main"></div>
这样的写法同样可以达到效果，并且也不会再怕具有相同属性的Class多而造成代码可读性差的问题，
但值得注意的一点就是，这种写法对于ID是无效的，不管其中是存在一个ID或者全部都是ID，都将造成这段代码的无效。
总结：要想使网站达到最好的优化效果，不光只是靠SEO优化，站内优化、代码优化同样重要。现在还有很多网络公司做的网站是使用Table作为前端开发，这样代码结构更加冗余，网站打开速度更慢；而金猫数据的所有网站都是使用最精简的DIV+CSS代码作为前端开发，不存在冗余代码，网站打开速度更快。
上一篇：jQuery无刷新分页动画效果代码
下一篇：解决IE6不支持min-width最小宽度的BUG
粤公网安备 44030902000741号 
