CSS代碼結構中id及class類命名探究

你對CSS代碼結構中id及class類命名規則是否熟悉，這裏和大家分享一下，不管你用id還是class，請不要讓它的名字與它的表現有任何的關聯，應該讓這個名字更有意義。

CSS代碼結構id及class類命名探究

在前面我們講了《根基的建立使有意義的html標記》。這些有意義並且具有良好的標籤標記CSS代碼結構爲我們提供了非常好的基礎，但是這些可能元素畢竟是有限的。不可能僅用這些元素就構成完整的網頁代碼。至少這些標籤標記，並不能區分，哪裏是頭部導航，哪裏是側邊欄，哪裏是內容區域。

我們現在解決辦法就是使用現有的元素，通過給他們id或class而得到額外的信息。這樣就使得文檔具有清晰的結構。比如，我們通過一個簡單的無序列表UL，可以創建出一個導航元素的信息：

ExampleSourceCode

<ulidulid="nav">

<li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li>
<li><ahrefahref="http://www.52css.com/">CSS佈局實例</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>

我們蘇州電腦維修一直強調以提醒你的注意，id是頁面上單獨的元素，必須是唯一的，這樣的益處在於程序或腳本的控制與選擇。id我們通常用來標記結構性的元素，如上面提到的頭部導航、側邊欄、內容區域等。

id　　一個id只能應用於同一個頁面上的一個元素。從理論上說，不同的頁面，完全可以使用同一個id。例如列表頁面的標籤與內容顯示頁面的標題，或者是首頁的聯繫方式與內頁的聯繫方式。需要你注意的是，這樣確實能省事簡化代碼提高效率。但如果將來需要根據頁面不同單獨定義他們的外觀，你將會遇到棘手的問題。我們建議你建立不同的id，但在CSS代碼編寫時，可以運用羣組選擇符進行外觀的設置，即使有變化，也可以非常方便的區分開來。例如：

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

類class　

　類class非常靈活，你可以將它應用於頁面上任意數量的元素。類class非常適合相似條目的定義。例如，我們需要在列表頁標識出文章的作者，我們不必爲每一個人建立id。我們只需要建立類author分配給每一位作者即可。

需要注意的是，不管你用id還是class，請不要讓它的名字與它的表現有任何的關聯，應該讓這個名字更有意義。例如我們在處理側邊欄時，或許它是在左側，你會給它一個leftsider的名字，但如果我們經過運行發現它處於右側更恰當。此時leftsider居於了右側，就顯得不是非常得體與恰當了。比如我們希望我們的關鍵內容加粗顯示，或許你會建立一個class類命名爲bold800。如果我們將來將它不加粗而是賦予不同的色彩，這個類名也不合適了。

我們說說命名的大小寫問題，我們的id名與class類名，一般情況下是不區分大小寫的，但不是一個好習慣。我們如果使用XHTML那麼id名與class類名是區分大小寫的，如果是使用HTML，那麼大小寫是沒有區別的。我們處理這樣問題的方法就是全部採用小寫，當然，你也可以按你的習慣，但要注意與開發團隊的其他成員協調。

我們的id與class類都是比較靈活的東西，只要你願意，你愛怎麼用就怎麼用，但問題就出現了。我們的頁面代碼中到處充斥着這些東西，我們的出發點是想更加精確的選擇和控制我們的頁面元素，但這好象又回到了表格時代，一切變的難以理解和不可閱讀，例如下面的代碼：

ExampleSourceCode

HTML：

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

CSS：

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

我們進行一下優化，去掉一些不必要的命名。代碼如下：

ExampleSourceCode

HTML：

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

CSS：

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

優化後的方式代碼更加的簡潔，我們只需要通過選擇器準確的找到樣式的應用目標就可以了。不必過份的依賴於id名或class類名。我們只有在不得已，不得不使用id或class標識的時候才使用它們。正常情況下，我們的文件只需要幾個或十來個id名與class名就完全能滿足需要了。如果你發現你的這些名字很多。要麼是你就是有多id多class結合症，要麼就是你的HTML文檔的結構出現了問題。我們將在以後52CSS.com的教程文章中，詳細的講解選擇符的相關知識與技術，讓你可以非常簡單而精確的選擇到樣式的作用目標。