DIV網(wǎng)頁(yè)布局規(guī)范中CSS類及id命名方式是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括鄯善網(wǎng)站建設(shè)、鄯善網(wǎng)站制作、鄯善網(wǎng)頁(yè)制作以及鄯善網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鄯善網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鄯善省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

你對(duì)DIV網(wǎng)頁(yè)布局規(guī)范中CSS類及id命名是否熟悉，這里和大家分享一下，Web開(kāi)發(fā)者可以通過(guò)創(chuàng)建CSS類及id名稱并使用這些名稱來(lái)對(duì)div以及其他的頁(yè)面元素、標(biāo)簽進(jìn)行標(biāo)識(shí)。

DIV網(wǎng)頁(yè)布局規(guī)范中CSS類及id命名

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

直觀命名

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

結(jié)構(gòu)化命名

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

可以按照如下所示的結(jié)構(gòu)化方式來(lái)對(duì)類以及id名稱命名：
branding
main-nav
subnav
main-content
sidebar
這些名字同直觀命名方式一樣非常易懂，但他們描述了頁(yè)面元素的作用而非位置。這使得代碼更加符合使用純粹的結(jié)構(gòu)化標(biāo)記（structuralmarkup）的初衷，即開(kāi)發(fā)人員可以在不改變標(biāo)記的情況下對(duì)各種各樣媒體下的顯示格式進(jìn)行處理。
即使你不打算在其他的媒體上對(duì)Web頁(yè)面進(jìn)行格式修改，使用結(jié)構(gòu)化命名方式還可以幫助你在日后的站點(diǎn)升級(jí)或重新設(shè)計(jì)中更為輕松。例如，結(jié)構(gòu)化命名避免了當(dāng)一個(gè)div同idright-column移動(dòng)到頁(yè)面左邊后所帶來(lái)的混亂。對(duì)divsidebar的采用這樣的命名方式就顯得更加適當(dāng)，因?yàn)闊o(wú)論它出現(xiàn)在頁(yè)面的哪一邊，這個(gè)名字仍然對(duì)開(kāi)發(fā)人員來(lái)說(shuō)直觀易懂。

一些命名慣例

AndyClarke分析了40份由推崇標(biāo)準(zhǔn)化Web設(shè)計(jì)理念的開(kāi)發(fā)人員所設(shè)計(jì)的Web站點(diǎn)的源代碼。盡管類以及id名稱很不統(tǒng)一，但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表：
header
content
nav
sidebar
footer
這些常見(jiàn)的類以及id名稱是否標(biāo)志著一種標(biāo)準(zhǔn)的誕生或是普遍接受慣例的形成呢？盡管這是我所希望的，但我并不這么認(rèn)為。我的確希望能夠看見(jiàn)一整套對(duì)于我們每天都可以看到的常用頁(yè)面元素的命名標(biāo)準(zhǔn)。同時(shí)，使用標(biāo)準(zhǔn)化的命名方式可以使得尋找頁(yè)面元素以及對(duì)Web站點(diǎn)升級(jí)帶來(lái)方便，尤其當(dāng)需要在由不同開(kāi)發(fā)人員在不同時(shí)間所開(kāi)發(fā)站點(diǎn)中換來(lái)?yè)Q去工作的時(shí)候。

關(guān)于DIV網(wǎng)頁(yè)布局規(guī)范中CSS類及id命名方式是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。