CSS代碼結(jié)構(gòu)中id及class類命名探究

作者：52css 2010-09-03 09:46:50

這里向大家描述一下CSS代碼結(jié)構(gòu)中id及class類命名，id我們通常用來(lái)標(biāo)記結(jié)構(gòu)性的元素，如上面提到的頭部導(dǎo)航、側(cè)邊欄、內(nèi)容區(qū)域等，而類class非常靈活，你可以將它應(yīng)用于頁(yè)面上任意數(shù)量的元素。

你對(duì)CSS代碼結(jié)構(gòu)中id及class類命名規(guī)則是否熟悉，這里和大家分享一下，不管你用id還是class，請(qǐng)不要讓它的名字與它的表現(xiàn)有任何的關(guān)聯(lián)，應(yīng)該讓這個(gè)名字更有意義。

CSS代碼結(jié)構(gòu)id及class類命名探究

在前面我們講了《根基的建立使有意義的html標(biāo)記》。這些有意義并且具有良好CSS代碼結(jié)構(gòu)的標(biāo)簽標(biāo)記為我們提供了非常好的基礎(chǔ)，但是這些可能元素畢竟是有限的。不可能僅用這些元素就構(gòu)成完整的網(wǎng)頁(yè)代碼。至少這些標(biāo)簽標(biāo)記，并不能區(qū)分，哪里是頭部導(dǎo)航，哪里是側(cè)邊欄，哪里是內(nèi)容區(qū)域。

　　我們現(xiàn)在解決辦法就是使用現(xiàn)有的元素，通過(guò)給他們id或class而得到額外的信息。這樣就使得文檔具有清晰的結(jié)構(gòu)。比如，我們通過(guò)一個(gè)簡(jiǎn)單的無(wú)序列表UL，可以創(chuàng)建出一個(gè)導(dǎo)航元素的信息：

ExampleSourceCode

<ulidulid="nav"> 
 
<li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li> 
<li><ahrefahref="http://www.52css.com/">CSS布局實(shí)例</a></li> 
<li><ahrefahref="http://www.52css.com/">CSS2.0教程</a></li> 
<li><ahrefahref="http://www.52css.com/">CSS酷站欣賞</a></li> 
<li><ahrefahref="http://www.52css.com/">CSS模板下載</a></li> 
</ul>

　　我們一直強(qiáng)調(diào)以提醒你的注意，id是頁(yè)面上單獨(dú)的元素，必須是唯一的，這樣的益處在于程序或腳本的控制與選擇。id我們通常用來(lái)標(biāo)記結(jié)構(gòu)性的元素，如上面提到的頭部導(dǎo)航、側(cè)邊欄、內(nèi)容區(qū)域等。

id　　一個(gè)id只能應(yīng)用于同一個(gè)頁(yè)面上的一個(gè)元素。從理論上說(shuō)，不同的頁(yè)面，完全可以使用同一個(gè)id。例如列表頁(yè)面的標(biāo)簽與內(nèi)容顯示頁(yè)面的標(biāo)題，或者是首頁(yè)的聯(lián)系方式與內(nèi)頁(yè)的聯(lián)系方式。需要你注意的是，這樣確實(shí)能省事簡(jiǎn)化代碼提高效率。但如果將來(lái)需要根據(jù)頁(yè)面不同單獨(dú)定義他們的外觀，你將會(huì)遇到棘手的問(wèn)題。我們建議你建立不同的id，但在CSS代碼編寫時(shí)，可以運(yùn)用群組選擇符進(jìn)行外觀的設(shè)置，即使有變化，也可以非常方便的區(qū)分開來(lái)。例如：

　　列表頁(yè)的標(biāo)題：<pid="listtitle">www.52css.com</p>
　　內(nèi)容頁(yè)的標(biāo)題：<pid="showtitle">www.52css.com</p>
　　CSS則可以這樣寫：#listtitle,#showtitle{font-size:1.2em;color:red;...}

類class　

　類class非常靈活，你可以將它應(yīng)用于頁(yè)面上任意數(shù)量的元素。類class非常適合相似條目的定義。例如，我們需要在列表頁(yè)標(biāo)識(shí)出文章的作者，我們不必為每一個(gè)人建立id。我們只需要建立類author分配給每一位作者即可。

　　需要注意的是，不管你用id還是class，請(qǐng)不要讓它的名字與它的表現(xiàn)有任何的關(guān)聯(lián)，應(yīng)該讓這個(gè)名字更有意義。例如我們?cè)谔幚韨?cè)邊欄時(shí)，或許它是在左側(cè)，你會(huì)給它一個(gè)leftsider的名字，但如果我們經(jīng)過(guò)運(yùn)行發(fā)現(xiàn)它處于右側(cè)更恰當(dāng)。此時(shí)leftsider居于了右側(cè)，就顯得不是非常得體與恰當(dāng)了。比如我們希望我們的關(guān)鍵內(nèi)容加粗顯示，或許你會(huì)建立一個(gè)class類命名為bold800。如果我們將來(lái)將它不加粗而是賦予不同的色彩，這個(gè)類名也不合適了。

　　我們說(shuō)說(shuō)命名的大小寫問(wèn)題，我們的id名與class類名，一般情況下是不區(qū)分大小寫的，但不是一個(gè)好習(xí)慣。我們?nèi)绻褂肵HTML那么id名與class類名是區(qū)分大小寫的，如果是使用HTML，那么大小寫是沒(méi)有區(qū)別的。我們處理這樣問(wèn)題的方法就是全部采用小寫，當(dāng)然，你也可以按你的習(xí)慣，但要注意與開發(fā)團(tuán)隊(duì)的其他成員協(xié)調(diào)。

　　我們的id與class類都是比較靈活的東西，只要你愿意，你愛(ài)怎么用就怎么用，但問(wèn)題就出現(xiàn)了。我們的頁(yè)面代碼中到處充斥著這些東西，我們的出發(fā)點(diǎn)是想更加精確的選擇和控制我們的頁(yè)面元素，但這好象又回到了表格時(shí)代，一切變的難以理解和不可閱讀，例如下面的代碼：

ExampleSourceCode

HTML：

<dividdivid="about52css"> 
<h1classh1class="title">Div+CSS教程www.52css.com</h1> 
<pclasspclass="abouttext">52css.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p> 
<pclasspclass="abouttext">52css.com的Div+CSS教程欄目有豐富的教程</p> 
</div>

CSS：

.title{font-size:13px;color:#f60;}  
.abouttext{font-size:12px;color:#666;}

　　我們進(jìn)行一下優(yōu)化，去掉一些不必要的命名。代碼如下：

ExampleSourceCode

HTML：

<dividdivid="about52css"> 
<h1>Div+CSS教程www.52css.com</h1> 
<p>52css.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p> 
<p>52css.com的Div+CSS教程欄目有豐富的教程</p> 
</div>

CSS：

#about52cssh1{font-size:13px;color:#f60;}  
#about52cssp{font-size:12px;color:#666;}

　　優(yōu)化后的方式代碼更加的簡(jiǎn)潔，我們只需要通過(guò)選擇器準(zhǔn)確的找到樣式的應(yīng)用目標(biāo)就可以了。不必過(guò)份的依賴于id名或class類名。我們只有在不得已，不得不使用id或class標(biāo)識(shí)的時(shí)候才使用它們。正常情況下，我們的文件只需要幾個(gè)或十來(lái)個(gè)id名與class名就完全能滿足需要了。如果你發(fā)現(xiàn)你的這些名字很多。要么是你就是有多id多class結(jié)合癥，要么就是你的HTML文檔的結(jié)構(gòu)出現(xiàn)了問(wèn)題。我們將在以后52CSS.com的教程文章中，詳細(xì)的講解選擇符的相關(guān)知識(shí)與技術(shù)，讓你可以非常簡(jiǎn)單而精確的選擇到樣式的作用目標(biāo)。

【編輯推薦】