實現用CSS高效率進行網頁編碼的方法

css|編碼|網頁

　　今天我們來看一些介紹：如何才能高效的進行CSS編碼？

　　CSS 被吹捧的好處之一就是它能減小頁面大小，由此縮短下載時間，不僅僅是首頁的載入，還包括樣式表被緩衝以後，後續頁面的載入也被加快了的那部分時間。這沒錯，但首頁載入時間的縮短几乎看不出來，這是因為 CSS 代碼往往過於冗長了。

　　好吧，現在一切都不同了。學點高效地進行 CSS 編碼的技巧吧，讓你把樣式表馬上裁減到最小為止。自然，你可能看不到什麼驚人的改變，但對於大站來說，微小的位元組減少也很重要。

　　有很多地方可以減少代碼的長度，包括 簡記屬性 (shorthand properties)， 多重聲明 (multiple declarations)，預設值 (default values)， 繼承 (inheritance)，和空白 (white space)。

　　簡記屬性

　　Zeroing page margins 提到了一組這樣的簡記屬性，但對於此還有更多的。

　　通常簡記屬性包括：

 font (控制 "font-size", "font-weight", "line-height", 等等) background   (控制元素的背景，置放位置，重複次數，等等)
 list-style (設定列表元素前邊那個“原點”的屬性)
 margin (定義 box   各側的邊緣空白 (margin) 寬度)
 border (定義 box 邊界 (border) 的屬性 —— 有很多和邊界有關的簡記屬性)  padding (定義 box 各側的補白 (padding) 寬度)

　　上述項目是連結至 W3C CSS 2 規範 的相關章節的。

　　例如， font 屬性 是用於同時設定 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的簡記屬性。當然，它們並非全都必須寫在簡記屬性中。一旦在簡記屬性中忽略了其中某個，那些缺失的屬性都將被設定為它們的 初始值，就像 W3C 規範 中 font property 一節提到的那樣。若需要控制很多和字型相關的屬性，使用這個簡記屬性就可以省下樣式表中的大量位元組了。

　　background 和 list-style 屬性也是如此。現在還剩下關於 CSS 盒 (box) 模型 四邊的那些屬性和一點沒法歸類的雜碎了。

　　盒側邊的簡記屬性

　　任何塊級 (block level) 元素 (像 div，表格，列表，段落等) 的四邊都有 邊白 (margin)，邊界 (border)，和 補白 (padding)，都可以分別設定不同的寬度。對於邊界 (border) 來說，還能給每邊分配不同的 border-style 和 border-color 。若要一條條地顯式地指明所有這些屬性，代碼就會變得很冗長。使用簡記規則的意義正在於此：徹底地減少這樣負擔。

　　“鐘面”

　　當需要指定這三類“盒側”屬性之一，而且各側的情況又是一樣的時候，使用簡記屬性最基本的功能就行了：

margin: 5px;border-width: 5px;padding: 5px;

　　注意：要讓邊界顯示出來，還必須設定 border-style 屬性，否則單有 border-width 邊界是顯示不出來的。既可以直接通過 border-style 來設定它，也可以通過 border 屬性。

　　然而很有可能某一側需要一個不同的值，這時 CSS 的“鐘面”特性就上台了。把此處的盒子想象為一個鐘面，當指標指向 12 點時，表示盒子的正上方，這就是簡記屬性中第一個值的含義；下一個是 3 點，這是盒子的右側；接下來是 6 點，表示盒子的下方；最後呢是 9 點，盒子的左側。

　　讓我們看看這個例子吧。在頁面中我們需要一個 10px 上邊白，5px 右邊白， 3px 下邊白，無左邊白的盒子。則 margin 簡記屬性應該這麼寫：

margin: 10px 5px 3px 0;

　　在屬性的聲明中，幾個值必須也只能用空格來分隔。而且只要那個值不是零，就必須給它指定單位。

　　為什麼零寬度的邊白就不需要指定單位了呢？因為零個任何單位 (px, em, %, 等等) 的值也就等於任意其他單位的值。

　　改進的鐘面

　　當某些值重複時，這些“盒側”屬性還能壓榨得更短。前面提到過，若各側都一樣，可以只指定一個，讓它應用到全部。而一旦頂部和底部的樣式是一致的，左側和右側卻是另一種，margin 的代碼可以這麼寫：

margin: 10px 5px;

　　這行代碼把頂部和底部的邊白設定為 10px，兩側設為 5px。最後一個技巧是這樣的：若頂部和底部的不同，兩側的卻是一樣的，比如上邊白 10px，左右邊白 5px，下邊白 20px，我們可以這麼寫：

margin: 10px 5px 20px;

　　這些縮寫完全是根據給出值的數目和順序決定的。總結起來，一個值 = 所有各側；兩個值 = 上下一種，兩側另一種；三個值 = 上側一種，左右同一種，下側一種；當然還有四個值 = 按照順時針。好了，現在不那麼難記住了吧？

　　邊界 (border) 的一些區別

　　同樣的鐘面簡記模型也可以用於 border 簡記屬性 和 padding。 border-width , border-color , border-style , 與 padding 也採用和 margin 一樣的方式工作。然而處理 border 屬性時卻有點不同。 border 屬性是同時給盒子的各側設定 border-width, border-style, 及 border-color 屬性的。

　　如果所有四側的樣式都一樣，那當然不會有什麼問題。可萬一他們不同呢？我們還得回去用那些老式的 border-top, border-right 們？沒錯，是可以。但幸好我們還有更有效率一點的方法。

　　考慮我們這個盒子的各個邊界有同樣的 style 和 color，但寬度不同的情況，最有效方法是，先像往常一樣用 border 簡記法來定義好 border-width, border-style, 和 border-color；然後再設定一次 border-width 屬性，覆蓋上面設定的寬度：

border: 10px solid red;
border-width: 10px 5px 3px 0;

　　如果所有的邊界屬性 (width、style 和 color) 都各側不同，那上面的方法恐怕就沒什麼用了，但通常不會遇到這麼怪異的情況。如果變化的屬性僅僅是 border-style 或者 border-color 的話，上述的方法改改就可以像 border-width 的情況那樣用了。

　　下面我們看看在另一種情形下書寫高效的 CSS 會帶來什麼改變。

　　多重聲明

　　考慮我們有 6 個採用絕對位置的 div (比如 Dreamweaver 裡的層)，且它們的其他屬性都一樣，只不過在頁面中的位置不同。因為它們的位置不同，自然應該有不同的 ID 或者是 class，但剩下的屬性還是一樣的。

　　一個 (所見即所得 (WYSIWYG)的) 布局編輯器恐怕給每個 ID 都各自寫一套屬性，包括字型的規則、文本的規則、位置的定義等等。可一遍遍地給這些 div 重複完全一樣的規則未免笨了點，不是嗎？那這樣就可以把這些規則減到最短了：

#first {left: 0;}
#second {left: 100px;}
#third {left: 200px;}
#fourth   {left: 300px;}
#fifth {left: 400px;}
#sixth {left: 500px;}
#first,   #second, #third, #fourth, #fifth, #sixth {
position: absolute;
top:   0;
width: 75px;
font-size: .9em;
font-weight: bold;
text-align:   center;
line-height: 1.4em;
background-color: silver;
color:   navy;
padding: 5px;
border: 1px solid navy;
}

　　列出所有類似的這些 div 的 ID，用 , 和一個空格分隔，下面的規則塊會被應用到所有這些 ID 上。顯然這樣的規則如果給每個 ID 都重複一遍，代碼就膨脹得多了。這恐怕是最常用也最有效縮短樣式表方法了。

　　注意：注意最後一個 ID 選擇符 並沒有 跟著一個逗號。(若多了逗號) 有些瀏覽器中可能還能看到那些 div，另一些就有可能把這樣的樣式表視為錯誤而不顯示任何一個 div 了。

　　預設值

　　許多 CSS 屬性都有它們的預設值，如果這個屬性沒被定義取代，它們就將應用於 HTML 元素上。比如說每個補白屬性中， padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某個元素不需要任何的補白，自然就可以不設定補白的那些屬性了。

　　注意： 那些簡記屬性——比如我們先前討論過的—— 裡面，或者其本身都沒有什麼預設的值。畢竟簡記屬性其實只是獨立屬性的一種重現而已，所以如果硬說它們有預設值的話，採用的也是獨立屬性的那些預設值。儘管 CSS 規範的 Property Index 一節中規定的許多預設值都是 none 或 0 ，瀏覽器們卻往往給不同的屬性設定一些不同的預設值。

　　例：Opera 瀏覽器給 body 元素設定了 8px 的補白。h1-h6 標題和段落，預設都有非零的邊白。列表和列表子項中用到的預設邊白和補白，每個瀏覽器都有所不同。

　　繼承

　　另一個避免寫出冗餘代碼的方法是，瞭解哪些屬於父元素的屬性會由子項目繼承下來。會被繼承的屬性只有很少一些，而且其中大部分是不常用的，比如 voice-family 。所以列個能繼承的常用屬性的表，其實是很短的，下面就是按字母順序排出的：

color
font (及其相關屬性)
letter-spacing
line-height
list-style   (及其相關屬性)
text-align
text-indent
text-transform
white-space  
word-spacing

　　在某些老式瀏覽器中，繼承功能可能有些問題，然而大部分現代瀏覽器在這方面都處理得很正確。記住上面這個列表，可以讓你少寫點多餘的代碼。當然了，如果你想看看完整的列表，還是參考 CSS 2 Property Index。
 
　　空白

　　並非指的是 CSS 的 white-space 屬性，這個屬性早有確定的值了。我們說的是樣式表本身含有的那些空白。空白常用於換行字元，和在一行裡面用來改進可讀性的空格。儘管把它們都刪除可能會剩下個把位元組，但好處畢竟有限。

　　關鍵是，如果把它們都刪除了，CSS 檔案就會變得非常難讀，更難修改。要是你真的打算這麼做，不妨建立一個主 CSS 檔案，再根據它產生一個刪除了所有空白的副本，修改的時候只修改主檔案，根據主檔案重建一次副本就行了。

　　請注意，CSS 編碼中需要一些空白，刪除那些必要的會導致你未曾預料的問題。如果 W3C 規範中用了 "space separated" 這樣的語句，那麼空格就不可省略。常見的像簡記屬性中分隔值的那些空格，還有 下降合并符 (descendant combinator)，或者稱為下降選擇符，就是一個空格。所以說不到非用不可的時候，刪除空白這樣的方法還是少用。

　　最後

　　你現在學會了好幾種讓你的樣式表更高效的方法，益處是在這些技巧下，不僅下載時間被減少了，而且清晰、易於理解、更改的代碼隨之而來。就算你用排版工具來編輯樣式表，也可以在最後用這些方法將其改定為高效的樣子。