日期:2014-05-16  浏览次数:20735 次

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

一、前面简短的唠叨

我掂量了下,本文还是有些必要的。讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的。越是对CSS理解不够,越容易出现这些问题。

有必要说明下,本文的样式代码均不考虑继承或是CSS reset。

二、一些常见不必要CSS样式

1、与默认CSS样式一致
我们有时候写的CSS样式会与浏览器默认的CSS样式一致,有时候您自己都可能没有意识到。
常见的例子有:

div{width:auto; height:auto;}

对于一些刚使用CSS的童鞋,有时候,其为了表达这段div高度是自动适应于内部元素的,会情不自禁的加上height:auto;的样式。很显然,这段样式是没有必要的,默认的任何块状元素的高度几乎都是auto。
我们来看看人人网个人首页的CSS样式文件(链接点这里),我在chrome浏览器下Ctrl+F搜索height:auto,居然显示了九条(见下图)。
人人网9个height:auto样式
出现的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;}

2、没有必要出现的样式
最常见的就是clear:both;的使用。
如果前后没有浮动元素干扰,使用clear:both是没有道理的。
比如说新浪新版博客个人博客的首页,clear:both属性可以说是滥用:
clear:both的滥用

在博客列表主体处基本上每个div标签都使用了clear:both属性,而这里所有的clear:both属性都是可以去除的。

clear:both的多余使用可以说是相当普遍使用的情况。像是开心网底部网站信息:
开心网clear:both示例 张鑫旭-鑫空间-鑫生活

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

3、不起作用的单样式
有些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" st