浅谈CSS重构问题

一般来说,重构是相对于程序来说,而且一般是比较复杂的程序,但是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问题。我们不希望自己写的代码,过了一段时间后,变成谁都不想接的烫手洋芋(并不说不肯接的人VALUE有问题,而实在是太麻烦了,太繁琐了)。

Category: 前端

2 responses

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. 帅 赵 says:

    大体都存在这样情况的原因是,开始写代码了就按图做效果了,并没有去思考这块用哪些标签合里,怎么写CSS合理。

  2. kelly says:

    能否谈一下大型网站css架构和管理方面的经验?