DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 讓XHTML元素的命名規則更加合理
讓XHTML元素的命名規則更加合理
編輯: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的官方博客,同樣的結構卻有截然不同的表現。

    看下面的代碼:

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

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

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

  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>  

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

    個人感覺這樣的命名比較新穎,非常值得借鑒。不過正如一開始所說的,“只要一個團隊有統一的命名規則要求,在日常開發和維護中不至於出現混亂就應該說是好的命名規則”。

原文連接:http://www.dudo.org/article.ASP?id=246

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