1.使用簡寫
如果你現在還對簡寫一點都不瞭解,那你就又寫落伍了,不過幸好,學起來並不是很難。使用簡寫是一種讓代碼減少的最簡單方法。沒有比現在更適合實踐代碼簡寫的時候了,還等什麼,一起來看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以進行簡寫的屬性。CSS簡寫就是不再使用不同的相類似屬性的聲明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它們簡寫成這樣:
p { margin: 10px 20px 30px 40px; }
瀏覽器可以通過不同數量的屬性值來解釋你定義的CSS代碼,請看圖解:
上面的簡寫圖解說明的是依據不同的屬性值可以進行不同的縮寫,這種方法同樣適用於padding和Border-width屬性。
Font的簡寫對於縮小代碼量很有協助,而且能讓你少打很多字母; )
Font簡寫的例子。注:如果沒有定義某個屬性值的話,將繼承副級元素的定義或使用預設值。
如果你對以上簡寫方法已經了如指掌,你還可以看看簡寫教程(英文),也許會對你有所協助
2.避免使用Hack
Hack是一個糟糕的東西,它會為不同瀏覽器定義一樣的代碼,使得CSS繁冗。現在我們知道使用條件性注釋來代替hack,他們在IE6和IE7中是被認可的,甚至IE團隊也推薦這樣使用。使用條件性注釋服務於符合瀏覽器特性專用的CSS代碼,因此,更小的、核心的CSS代碼用來服務於遵從標準的瀏覽器,只有需求條件出現的時候(比如IE),才會去下載額外的CSS檔案!
下面來看看IE6使用條件性注釋的代碼範例:
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
這段代碼使得IE6去下載額外的ie6.css解析它專用的css代碼。同樣的,如果針對IE7隻用把上面的6與7替換就行了。
3.使用留白
無論是為了自己閱讀還是二次開發,都要讓CSS保持良好的可讀性,留白就充當了關鍵的角色。
我們不鼓勵你為了得到一個更小的CSS檔案,就去掉所有的空白欄框式,如tab,換行,空格等。這裡推薦嵌套的代碼使用一個tab縮排,所有屬性獨立一行。
對比中的兩種CSS書寫格式,哪一種格式能讓你更加節約閱讀和修改的時間呢?留白的效果顯而易見,它會讓你更容易管理代碼。
4.移除多餘的結構(frameworks)和重設(resets)
如果你選擇使用CSS framework,包括你自己寫的,如果你去檢查代碼一定會發現該framework包含的一些規則並不適用於你當前的檔案,它們是可以被刪除的。
由此可以想到的還有reset,YUI Grid CSS 使用的reset和Eric Meyer’s 重設(Reset) 目前都很流行, Resets能夠移除不同瀏覽器的預設樣式,使得頁面在各個瀏覽器之間的表現一致。但是它們通常包含了一個大的網站需要的所有屬性,一些例如<pre>,<code>,<sub>,<dfn>,<var>等等屬性對於普通網站來說根本不會用上,刪掉那些你用不上的。Eric Meyer也會鼓勵你這樣做!
framework和reset會很好的協助你的工作,但是如果不去掉那些你用不上的使用,反而會拖累你頁面的效率和可讀性。