這篇文章將為大家詳細講解有關DIV布局規(guī)范中CSS類及id命名方式是什么，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

專注于為中小企業(yè)提供成都網站設計、網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)南樂免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

DIV網頁布局規(guī)范中CSS類及id命名

Web開發(fā)者（也就是您）可以通過創(chuàng)建CSS類及id名稱并使用這些名稱來對div以及其他的頁面元素、標簽進行標識。對開發(fā)人員來說，在命名重新定義XHTML標記（tags）的CSSselectors時，必須保證其與預定義的標記準確匹配，但就類以及id選擇器名稱而言，則仁者見仁，智者見智。然而隨心所欲的為這些類以及id命名則并不是個好的習慣。
在閱讀了由AndyClarke（ofStuffandNonsenseandAllThatMalarkey）以及EricMeyer所撰寫的關于CSS類以及id命名規(guī)范的系列文章之后，我開始思考在自己的Web站點設計過程中對類以及ids的命名方式。

直觀命名

當在設計Web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。這種方法使得類以及id的名稱如下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡單并且能夠使人顧名思義，因此滿足了標識頁面元素以及相應的CSS樣式的需要。
但問題是這樣的名稱同頁面內容的特定表達方式相關聯(lián)。這些命名參考了某種特定頁面布局中的頁面元素位置，因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。同時，這些命名沒有涉及文檔內容的結構。因此，下面給出了對CSS類以及ID命名更好的方法。

結構化命名

結構化的標記意味著表達方式/位置信息同內容的完全分離——這其中包括出現(xiàn)在標記（markup）中的類和id名稱。
有標記的相關信息都是用來描述文檔的結構而不是外觀。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就可以發(fā)現(xiàn)采用頁面位置來為類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得非常不合適。因此，應當根據在文檔中的使用目的而非出現(xiàn)位置來對類以及id進行結構化命名。

可以按照如下所示的結構化方式來對類以及id名稱命名：
branding
main-nav
subnav
main-content
sidebar

這些名字同直觀命名方式一樣非常易懂，但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記（structuralmarkup）的初衷，即開發(fā)人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理。
即使你不打算在其他的媒體上對Web頁面進行格式修改，使用結構化命名方式還可以幫助你在日后的站點升級或重新設計中更為輕松。例如，結構化命名避免了當一個div同idright-column移動到頁面左邊后所帶來的混亂。對divsidebar的采用這樣的命名方式就顯得更加適當，因為無論它出現(xiàn)在頁面的哪一邊，這個名字仍然對開發(fā)人員來說直觀易懂。

一些命名慣例

AndyClarke分析了40份由推崇標準化Web設計理念的開發(fā)人員所設計的Web站點的源代碼。盡管類以及id名稱很不統(tǒng)一，但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表：
header
content
nav
sidebar
footer

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

關于DIV布局規(guī)范中CSS類及id命名方式是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

標題名稱：DIV布局規(guī)范中CSS類及id命名方式是什么
網頁鏈接：http://chinadenli.net/article34/giigse.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、搜索引擎優(yōu)化、品牌網站制作、全網營銷推廣、、靜態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)