一般来说，重构是相对于程序来说，而且一般是比较复杂的程序，但是CSS也需要重构吗？
我觉得很有必要。今天无意中看到这样一段CSS代码,其实这样的代码目前我们是普遍存在的。
.wrods2 a{display:block;background:url(1.gif);text-decoration:none;width:31px;height:19px;padding:4px 0px 0px 14px;}
.wrods2 a:link{display:block;background:url(1.gif);text-decoration:none;width:31px;height:19px;padding:4px 0px 0px 14px;}
.wrods2 a:hover{display:block;background:url(2.gif);text-decoration:none;width:31px;height:19px;padding:4px 0px 0px 14px;}
.wrods2 a:active{display:block;background:url(2.gif);text-decoration:none;width:31px;height:19px;padding:4px 0px 0px 14px;}
分析下这段CSS，问题出在哪里？
非常明显，代码里面有很多重复的内容，并不是说不允许重复，而是你写完这段代码的时候，你有没有重新审视一下，这样写是不是最优的？是不是最精简的？
如果你花那么一点点的时候稍微瞄一下，我估计你自己也不会接受这样写法，太累赘了，所以要重构。这段代码相对来说是非常简单的，接下来我就重构下：
.wrods2 a{background:url(1.gif);}
.wrods2 a:link{background:url(1.gif);}
.wrods2 a:hover{background:url(2.gif);}
.wrods2 a:active{background:url(2.gif);}
.wrods2 .layout{display:block;width:31px;height:19px;padding:4px 0px 0px 14px;text-decoration:none;}
这是一个非常非常简单的CSS重构（这个重构还不时很彻底，text-decoration:none;可以作为A链接的公共属性独立出来，但是重构并不是完全盲目的，比如如果仅仅是这段代码，这样重构就可以来，但是如果有很多很多这样的A链接定义，按很有必要把display:block;和text-decoration:none;都独立出来），但是很有必要，不仅减少了代码量，而且还增加了CSS的可读性。
增强CSS的可读性目前来说是非常重要，也是迫不及待要做到，目前我们网站的CSS基本上可读性是非常非常差，一般一个项目做好以后，写了大量的CSS，都没有做过代码的重构和优化，可读性极差，十天半个月过去后，要在原来基础上改写东西，麻烦来了，看起来太累了，连自己写的人都看不懂，别人更加看不懂。还好，现在有FIREDUG，可以帮助我们解决大部分麻烦的CSS问题。我们不希望自己写的代码，过了一段时间后，变成谁都不想接的烫手洋芋。