DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 對CSS類及id的規范化命名
對CSS類及id的規范化命名
編輯:CSS進階教程     

Web開發人員可以通過創建CSS類及id名稱並使用這些名稱來對divs以及其他的格式頁面元素進行標識。對開發人員來說,在命名重新定義XHTML標記(tags)的CSS selectors時,必須保證其與預定義的標記准確匹配,但就類以及id選擇器名稱而言,則仁者見仁,智者見智。然而隨心所欲的為這些類以及id命名則並不是個好的習慣。
 
在閱讀了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric Meyer所撰寫的關於CSS類以及id命名規范的系列文章之後,我開始思考在自己的Web站點設計過程中對類以及ids的命名方式。

直觀命名

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

top-panel

horizontal-nav

left-side

center-column

right-col

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

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

1 2 下一頁

慣例

Andy Clarke分析了40份由推崇標准化Web設計理念的開發人員所設計的Web站點的源代碼。盡管類以及id名稱很不統一,但是還是發現了一些頻繁出現的常用名稱。這裡給出了最常用類/id名稱的示例列表:
 
header

content

nav

sidebar

footer

如果要查看完整的列表,可以看看最常見命名慣例表

這些常見的類以及id名稱是否標志著一種標准的誕生或是普遍接受慣例的形成呢?盡管這是我所希望的,但我並不這麼認為。我的確希望能夠看見一整套對於我們每天都可以看到的常用頁面元素的命名標准。同時,使用標准化的命名方式可以使得尋找頁面元素以及對Web站點升級帶來方便,尤其當需要在由不同開發人員在不同時間所開發站點中換來換去工作的時候。

上一頁 1 2

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved