去除冗餘 – 精簡您的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