|
今天有點(diǎn)閑，想向大家請教一下id和class的使用。
按照字面的意思，id是指一個元素在整個文檔中的“唯一標(biāo)志”，而class則是它所屬的“類別”。按照語法，同名的id在一個文檔里只應(yīng)該出現(xiàn)一次，而class名可重復(fù)使用。
但是在具體使用的時候，哪些樣式該用id，哪些樣式改用class呢？有個答案很簡單：
那些只會在頁面中出現(xiàn)一次的元素應(yīng)該用id來表示。比如頁頭（header） 頁尾（footer），導(dǎo)航菜單（main-menu）等。但是真的這么簡單么？
我先舉幾個例子來說明我所遇到的尷尬：
- 大多數(shù)的頁面都是兩欄布局的：一個主欄（main column），一個側(cè)欄（side column）。就像這樣：
OK，我們會用兩個div來表示它們。問題來了，應(yīng)該使用id還是class？按照常規(guī)的理解，一個頁面只會有一個主欄，一個側(cè)欄咯，所以當(dāng)然應(yīng)該用id。文檔寫成這：
<div id="main-col"></div>
<div id="side-col"></div>
#main-col { float: left; width: 700px;}
#side-col { float: right; width: 200px; }
也是很賞心悅目的，不是么？所以我決定用id。
于是頁面做好了，網(wǎng)站做好了，上線了，運(yùn)營了，訪問量大了。這時候公司決定，嗯，我們應(yīng)該在一些頁面中加幾個通欄廣告。“通欄”哦！這就意味著它必須橫跨主欄和側(cè)欄，把它們倆攔腰截斷。于是我們重新“發(fā)明”一個樣式：banner，讓banner來一個clear:both; 然后放到頁面中間去阻止掉兩個欄的浮動。然后再在banner的后面繼續(xù)分兩欄。下面是示意圖：
所以HTML應(yīng)該是這樣：
<div id="main-col"></div>
<div id="side-col"></div>
<div class="banner></div>
<div id="main-col"></div>
<div id="side-col"></div>
問題輕松解決（多虧偶經(jīng)驗豐富啊，表揚(yáng)一下自己，咔咔。）。唯獨(dú)只有一個問題：main-col和side-col這兩個id重復(fù)了。這個問題其實也不麻煩，把它們?nèi)扛某蒫lass不就好啦（甚至，不去改它，我就不信瀏覽器會給我報錯，哼）。
- 但是，我這不是自己給了自己一個嘴巴么？當(dāng)初還信誓旦旦的說，main-col只會出現(xiàn)一次，所以用id……。所以教訓(xùn)就是，main-col和side-col，或是left-col, right-col ,extra-col, xxx-col，這些用來分欄布局的樣式，都給我用class。嗯，記在本本上。
- 設(shè)計頁面的時候，在頁頭和主菜單之間放了一個搜索框（search-box）。既然我們的頁頭（header），導(dǎo)航欄（main-menu），登錄框（login-box）都用的是id，和它們在一起的search-box也應(yīng)該用id咯？呃，小心啊，老板很可能會讓你在頁尾也放一個搜索框的，你用id你就死定了。所以search-box應(yīng)該用class。不過這樣怪怪的，憑什么login-box用id，而search-box卻用class呢？
- 慢著，你以為導(dǎo)航欄就可以保證唯一了么？我來講一個例子：
喏，老板要來一點(diǎn)不同的，讓把導(dǎo)航欄放在左側(cè)。這個沒問題，用一個ul就搞定拉。我把它的id設(shè)置成main-menu但是過了一會兒，他說，嗯，為了可用性（咳咳。。），我們需要把菜單分成兩部分。就像：
呃。。好說，分成兩個ul就好了。但是，它們的id都叫main-menu么？？哎，老問題又來了。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 如何正確的使用 id 和 class [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 如何正確的使用 id 和 class [1]
第 2 頁 
