CSS創意命名規則

    關於CSS中的命名規則（其實我覺得是XHTML元素的命名規則更加合理些）這個問題，已經有很多人在說了，其中也不乏一些真知灼見。不過這種東西也是仁者見仁，智者見智，只要一個團隊有統一的命名規則要求，在日常開發和維護中不至於出現混亂就應該說是好的命名規則。比如下面這條基本的命名規則：

CSS開發命名規則

外　套	wrap	主導航	mainnav	子導航	subnav
頁　腳	footer	整個頁面	content	頁　眉	header
商　標	label	標　題	title	頂導航	topnav
邊導航	sidebar	左導航	leftsidebar	右導航	rightsidebar
旗　志	logo	標　語	banner	子功能表	submenu
容器	container	內容	content	當前的	current

     問題是，上面的諸如leftsidebar,rightsidebar等擁有很強指向性的命名在以後的布局變化中會怎麼樣呢？如果left出現的位置不是左側，是中間或者是右側怎麼辦呢？如果rightsidebar出現在左側怎麼辦呢？這時的命名似乎有點不合邏輯了。有人常和我說，你這樣的考慮有意義嗎？多餘的！真正有幾個網站會用同樣的結構去做兩次不一樣的布局，頂多就是改版了，改版的時候連結構都變了，這樣的考慮完全多餘。的確，經常會有這樣的問題，有些網站不一次成形到下次改版前風格基本上不會改變，但是有些網站，比如我的部落格，你再去看看PJBlog的官方部落格，同樣的結構卻有截然不同的表現。

    看下面的代碼：

view plaincopy to clipboardprint?

1. <div>  
2.   <div>content</div>  
3.   <div>bar1</div>  
4.   <div>bar2</div>  
5. </div>  

<div>  <div>content</div>  <div>bar1</div>  <div>bar2</div></div>

怎麼去命名他們呢？bar1和bar2可以出現在兩側，也可能出現在一側，無論使用right、left、middle都不太合適。那麼怎麼去命名會比較合適一點呢？

    這裡提供一個來自Adobe.com的創意，它使用的是 父元素-欄目組-欄目，其中欄目（column）使用無實際意義的字元表示，如A、B、C等。例如 wrap-AB-A，意思已經ID為wrap的元素下包含著兩個div——A和B，現在要進行操作的是A。這樣的命名完全和元素沒有關係，而且意義還比較清晰。例如上面的命名就可以寫成：

view plaincopy to clipboardprint?

1. <div id="container">  
2.   <div id="container_ABC_A">content</div>  
3.   <div id="container_ABC_B">bar1</div>  
4.   <div id="container_ABC_C">bar2</div>  
5. </div>  

<div id="container">  <div id="container_ABC_A">content</div>  <div id="container_ABC_B">bar1</div>  <div id="container_ABC_C">bar2</div></div>

"container_ABC_A"，說明是對container下有三個並列的元素（它們的ID分別是A、B、C），目前指向的是第一個，即A。這樣做的好處就是不受布局的影響，名稱和頁面最終表現想分離，不過一個缺點就是，下因為A、B、C的意義使得再次嵌套的時候命名有點“亂”，如 id="container_ABC_A_abc_a"，層次深了就不太清晰了。