網頁製作 談談CSS樣式表的命名規範

css|規範|網頁|樣式表

　　最近和一程式員合作項目。弄的我頭都大了~埋怨我的CSS命名看不懂~得按照他的來。結果我開啟他的頁面，看了看,從頭第一個開始就是contentCommon，下面全部是content****. 我說明了我的理由，過了半會，似乎是接受了，卻突然來一句:“不要用H標籤嘛!還有不要用UL來定義導航等“。對於很多合作過的程式員，大多都是這樣，命名規範大多是自成一派。對於製作標準更是視而不見。抱著只照顧IE正常瀏覽的態度叫囂著”讓FIREFOX和SAFARI見鬼去吧!”

　　命名全部使用小寫字母，如果需要多個單詞，單詞間使用“-”分隔，比如content-title

　　直觀命名

　　當在設計Web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞彙來對其命名。這種方法使得類以及id的名稱如下面所示:

• top-panel
• horizontal-nav
• left-side
• center-column
• right-col

　　這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義，因此滿足了標識頁面元素以及相應的CSS樣式的需要。

　　但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面配置中的頁面元素位置，因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。同時，這些命名沒有涉及文檔內容的結構。因此，下面給出了對CSS類以及ID命名更好的方法。

　　結構化命名

　　結構化的標記意味著表達方式/位置資訊同內容的完全分離——這其中包括出現在標記(markup)中的類和id名稱。

　　有標記的相關資訊都是用來描述文檔的結構而不是外觀。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內容(content)以及標記(markup)進行重用。當你理解這種方式時，很容易就可以發現採用頁面位置來為類以及id命名的方式在處理如音頻(audio)等外觀格式上顯得非常不合適。因此，應當根據在文檔中的使用目的而非出現位置來對類以及id進行結構化命名。

　　可以按照如下所示的結構化方式來對類以及id名稱命名:

• 　　branding
• 　　main-nav
• 　　subnav
• 　　main-content
• 　　sidebar

　　這些名字同直觀命名方式一樣非常易懂，但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記(structural markup)的初衷，即開發人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理。

　　即使你不打算在其他的媒體上對Web頁面進行格式修改，使用結構化命名方式還可以協助你在日後的網站升級或重新設計中更為輕鬆。例如，結構化命名避免了當一個div同id right-column移動到頁面左邊後所帶來的混亂。對div sidebar的採用這樣的命名方式就顯得更加適當，因為無論它出現在頁面的哪一邊，這個名字仍然對開發人員來說直觀易懂。

　　慣例

　　最常用類/id名稱的樣本列表:

• header
• content
• nav
• sidebar
• footer

　　常用標籤:

　　div:主要用於布局，分割頁面的結構

　　ul/ol:用於無序/有序列表

　　span:沒有特殊的意義，可以用作排版的輔助

　　h1-h6:標題

　　h1-h6 根據重要性依次遞減

　　h1位最重要的標題

　　label:為了使你的表單更有親和力而且還能輔助表單排版的好東西

 <label for="user-password">密　碼</label>
<input type="password" name="password" id="user-password" />

　　(XHTML 1.0 Strict 下不能通過，可以使用"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre",

　　"address", "fieldset", "ins", "del" )

　　dl dd dt 定義列表,當頁面中出現第一行為類似標題/簡述，然後下面為詳細描述的內容時應該使用該標籤

<dl>
<dt>貓
<dd>一種可供飼養的小寵物。
<dt>蜥蜴
<dd>通常可在乾燥地區發現的爬行動物。
</dl>