精简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，都将造成这段代码的无效。