去除冗余 – 精简您的CSS样式代码

讲讲常见的一些没有必要使用CSS代码状况，而这些不起做用能够去掉的CSS代码多是咱们常常忽视的。越是对CSS理解不够，越容易出现这些问题。

2、一些常见没必要要CSS样式

一、与默认CSS样式一致
咱们有时候写的CSS样式会与浏览器默认的CSS样式一致，有时候您本身均可能没有意识到。
常见的例子有：

①

div{width:auto; height:auto;}

对于一些刚使用CSS的童鞋，有时候，其为了表达这段div高度是自动适应于内部元素的，会不由自主的加上height:auto;的样式。很显然，这段样式是没有必要的，默认的任何块状元素的高度几乎都是auto。
咱们来看看人人网我的首页的CSS样式文件（连接点这里），我在chrome浏览器下Ctrl+F搜索height:auto，竟然显示了九条（见下图）。

按照常规来说，height:auto只有在使用CSS优先级抹掉以前的height定值的样式的时候使用，其他状况基本上都是能够去掉的。就像是上面人人网的例子，竟然9个height:auto，我敢确定至少有一半是没有必要的。

②

body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

上面有关body,p等标签的样式中有个样式是无效的，与默认值一致的，这个样式就是padding:0;，对于body,p,h1~6这些标签，自己的padding值就是0，因此只须要margin:0就能够了。

在CSS reset中，为了方便，都是一堆标签直接套个margin:0;padding:0;了事。还拿人人网的CSS样式文件举例，人人网我的首页样式第一行就是一长串标签带个margin:0;padding:0;先 无论其犯傻把span,div,em之类的标签也加进入，就算是没有这些标签，我也是极不推荐这种写法，彻底的浪费资源，浪费CSS的渲染。我比较喜欢的 作法是把ul,ol独立出来，由于ul,ol还要独立设置list-style样式，并且经常使用的标签就ul,ol列表元素有默认的padding值，因此 我认为高效的写法应该是：

body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-type:none; margin:0; padding:0;}

③

span{display:inline; float:left; margin-left:3px;}

这也是常出现的。我想出现这种状况的缘由可能与IE6的浮动双边距bug有关，咱们能够用设置display:inline的方法修复IE6的这个 bug，可是，若是对这个bug理解不够，对CSS的理解不足，就会出现滥用的状况。上面是滥用的状况之一，对于span/a/em/cite/i/b /strong等行内元素默认就是display:inline的，因此给其设置display:inline属性是画蛇添足。

相似的状况还有对自己就是block水平的元素设置display:block属性，例如：

li{display:block; padding:4px 0;}

上面的状况家常便饭，甚至在比较优秀的网站上也会有这类低级的样式问题。

④

其余一些状况

div{margin:auto;}

textarea{overflow:auto;}

img,input,button{vertical-align:baseline;}

div{background-position:0 0;}

二、没有必要出现的样式
最多见的就是clear:both;的使用。
若是先后没有浮动元素干扰，使用clear:both是没有道理的。
好比说新浪新版博客我的博客的首页，clear:both属性能够说是滥用：

在博客列表主体处基本上每一个div标签都使用了clear:both属性，而这里全部的clear:both属性都是能够去除的。

clear:both的多余使用能够说是至关广泛使用的状况。像是开心网底部网站信息：

这里就很少举例了，反正记住，要是先后没有直接的浮动元素，使用clear:both就是多余的。

三、不起做用的单样式
有些CSS样式只针对特定显示水平的标签起做用。

①inline水平
inline水平的元素对不少CSS样式都不起反应，例如height/width, clear, margin-top/margin-bottom, vertical-align, overflow等。举个实例吧，拿overflow:hidden属性举例，对于inline水平的元素而言，设置overflow:hidden属性 是没有做用的。例以下面的测试代码：

<span style="overflow:hidden;">
    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="margin-left:-5px;" />
<span>

对比于：

<span style="display:inline-block; overflow:hidden;">
    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="margin-left:-5px;" />
<span>

对比图以下：

②block水平
block水平的元素对vertical-align属性没有做用。

②组合起做用
有些样式须要和其余一些特定的CSS属性一块儿使用才有做用。常见的就是z-index与position属性的组合使用，left/top/bottom/right与position属性的组合使用。

四、组合样式中多余的CSS代码
这种状况就多了，实际状况下，牵扯到继承，命名冲突，书写等，这里仅仅举一些常见的多余样式的例子，相信您会在其中找到您本身的一些错误的。

①

a{display:block; float:left; margin-top:2px;}

这能够说是最多见的含有多余样式的例子了，开心网我的首页可谓随处可见，见下图：

这里的display属性彻底没有必要，对于a或是span标签而言，没有任何理由使用display+float的组合，由于float所产生的“包裹”做用已经让元素如同一个inline-block水平的元素，这种做用大于直接的display设置。

仅仅一种状况下有必要使用display+float的组合，就是block水平的元素在IE6下的双边距bug问题，这种状况的惟一写法就是display:inline; float:left; margin-left:3px;必定要有与float浮动同方向的margin值，不然display:inline是多余的，能够直接去掉。

②

div{height:25px; line-height:25px;}

这又是一种常见的平时不注意的能够精简的CSS代码，这段代码高度与line-height值一致，一般做用是实现单行文字的垂直居中显示。可是实 际上，不少状况下，这里的height是个多余的值，尤为在模块标题处。对于单行文字而言，您设置line-height多大，其实际占据的垂直高度就是 多高，没有任何的兼容性问题，能够放心使用。

可是，有时候这里的height值是有必要的，何时呢？就是IE6/7清除浮动影响的时候，IE6/7下设置height值可让元素haslayout从而清除浮动的影响，而line-height无此做用，还有就是其余一些须要layout的状况。

③

span{display:block; width:100%;}
div{width:100%;}
body{width:100%;}

这也是常见的使用多余CSS样式的状况，width:100%。在通常状况下，对于block属性的元素，width:100%这个属性绝对是多余的。默认的，block水平的元素就是宽度相对于父标签100%显示的。

固然，不使用100%的状况不是绝对的，下面这个组合可能使用width:100%是有必要的。

div{width:100%; overflow:hidden;}

在IE6/7（没有IE8）下，对于block水平的元素，咱们可使用width:100%清除浮动形成的影响，缘由与上例同样，haslayout，除了这种状况，纯粹的{width:100%;}样式（无float或是position:absolute之类的样式）是不可能出现的。因此，若是您的CSS代码中出现上述状况，检查下您的width:100%是否是多余的。（下图为搜狐白社会动态列表中多余width:100%状况）

④

div{float:left/display:inline; vertical-align:middle;}

设置无用的vertical-align属性也是常见的。对于block/inline水平的元素或是设置了浮动属性或是absolute绝对定位 的元素，其都不支持vertical-align属性。因此这些属性与vertical-align同时出现时，vertical-align属性不起任 何做用是多余的。

例如人人网右侧的垂直菜单block水平的li元素：

或是淘宝新版首页左上侧的垂直列表：

我是实在想不出这里要使用vertical-align属性的理由。

⑤

div{position:absolute; left:0; top:0; display:inline; float:left; margin-left:10px;}

设置了绝对定位属性的元素相对特殊些，其不支持的CSS样式可就多了，首先对于display属性，彻底没有必要，不管是block/inline-block/inline都是如此，除了现实隐藏外，没有任何组合使用的理由。absolute元素一旦设置了left/top这类定位值，margin属性也就失去了做用（有做用的），浮动也无效。还有其余不少属性都不支持，例如clear，vertical-align等。

⑥

div{height:20px/width:200px; zoom:1; overflow:hidden;}

咱们可能会使用zoom清除IE6/7（对IE8无效）浏览器下浮动形成的影响。可是对于IE6/7而言，若是您已经设置了高度值或是宽度值，那么 zoom:1彻底就是多余的，在IE6/7下含有定值的height或是width与zoom:1起到了一样的一个做用，就是使元素haslayout， 可用来清除浮动产生的影响，因此，width/height与zoom:1同时出现也是没有任何理由的。

⑦其它状况

a{display:inline-block; *display:inline; *zoom:1;}

这是设置元素的inline-block属性，可是对于inline行内元素来讲，后面的两个样式就是多余的，由于display:inline-block可让inline水平的元素表现的就如同真正的inline-block水平同样。
因此，下图人人网样式代码中标注的代码就是多余的。若是是div，则须要上面完整代码。

好吧，就先整理这么多，之后要是有新发现再来补充。也欢迎您来补充。

3、最后的简短唠叨

使CSS代码足够精简的方法就是对每一个CSS样式都要很是的熟悉了解，就像了解本身的孩子那样去了解它，这样子，写出无用样式的概率就会逐渐减少啦。

 

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=629