按照字面的意思，id是指一個元素在整個文件中的“唯一標誌”，而class則是它所屬的“類別”。按照語法，同名的id在一個文件裡只應該出現一次，而class名可重複使用。

但是在具體使用的時候，哪些樣式該用id，哪些樣式改用class呢？有個答案很簡單：

那些只會在頁面中出現一次的元素應該用id來表示。比如頁頭（header） 頁尾（footer），導航選單（main-menu）等。但是真的這麼簡單麼？

我先舉幾個例子來說明我所遇到的尷尬：

大多數的頁面都是兩欄佈局的：一個主欄（main column），一個側欄（side column）。就像這樣：

OK，我們會用兩個div來表示它們。問題來了，應該使用id還是class？按照常規的理解，一個頁面只會有一個主欄，一個側欄咯，所以當然應該用id。文件寫成這：

<div id="main-col"></div>

<div id="side-col"></div>

#main-col { float: left; width: 700px;}

#side-col { float: right; width: 200px; }

也是很賞心悅目的，不是麼？所以我決定用id。

於是頁面做好了，網站做好了，上線了，運營了，訪問量大了。這時候公司決定，嗯，我們應該在一些頁面中加幾個通欄廣告。“通欄”哦！這就意味著它必須橫跨主欄和側欄，把它們倆攔腰截斷。於是我們重新“發明”一個樣式：banner，讓banner來一個clear:both; 然後放到頁面中間去阻止掉兩個欄的浮動。然後再在banner的後面繼續分兩欄。下面是示意圖：

所以HTML應該是這樣：

<div id="main-col"></div>

<div id="side-col"></div>

<div class="banner></div>

<div id="main-col"></div>

<div id="side-col"></div>

問題輕鬆解決（多虧偶經驗豐富啊，表揚一下自己，咔咔。）。唯獨只有一個問題：main-col和side-col這兩個id重複了。這個問題其實也不麻煩，把它們全部改成class不就好啦（甚至，不去改它，我就不信瀏覽器會給我報錯，哼）。

但是，我這不是自己給了自己一個嘴巴麼？當初還信誓旦旦的說，main-col只會出現一次，所以用id……。所以教訓就是，main-col和side-col，或是left-col, right-col ,extra-col, xxx-col，這些用來分欄佈局的樣式，都給我用class。嗯，記在本本上。 設計頁面的時候，在頁頭和主選單之間放了一個搜尋框（search-box）。既然我們的頁頭（header），導航欄（main-menu），登入框（login-box）都用的是id，和它們在一起的search-box也應該用id咯？呃，小心啊，老闆很可能會讓你在頁尾也放一個搜尋框的，你用id你就死定了。所以search-box應該用class。不過這樣怪怪的，憑什麼login-box用id，而search-box卻用class呢？ 慢著，你以為導航欄就可以保證唯一了麼？我來講一個例子：

喏，老闆要來一點不同的，讓把導航欄放在左側。這個沒問題，用一個ul就搞定拉。我把它的id設定成main-menu但是過了一會兒，他說，嗯，為了可用性（咳咳。。），我們需要把選單分成兩部分。就像：

呃。。好說，分成兩個ul就好了。但是，它們的id都叫main-menu麼？？哎，老問題又來了。

例子舉了這麼多，你可看得出，僅僅因為“只出現一次的元素”這個理由，就決定給它用id而不是class，這是絕對行不通的。因為你幾乎很難判斷某個元素是不是一定只出現一次。但是，這樣的分析會得出一個可怕的結論：所有的樣式都應該用class。

對此，我其實並不懷疑。事實上，以我的看法，95%以上的樣式，都應該通過class而不是id來設定。或者說，除非是一些很細微很特殊的位置，可以使用id來設定樣式，其他的樣式都應該用class來設定。這個結論似乎和WaSP的聖經書《網頁重構》裡講的矛盾，因為他老人家是專門批評了所謂的classitis（class麻疹，見該書148頁）。但是很抱歉，鐵證如山的事實底下，我不得不否定他那句“熱愛id”（見該書150頁）。

當然，我很希望我是錯的，畢竟背叛經典是一件很讓人不舒服的事情。所以歡迎大家來討論，指出我的錯誤。更重要的是，對於我舉出的哪些尷尬的例子給出一個更好的解決方案。

總結：儘量用class而不是id來控制樣式的理由：

可維護性。你不能保證你用id的元素只在頁面中出現一次，即使在網頁設計初稿中確實是只有一次。 id可能被Ajax程式設計師使用。如果頁面要用ajax的話，某些元素的id值應該由Ajax程式設計師而不是頁面設計師來決定，至少應該是雙方共同商定。那麼，你怎麼能放心你的id值既用來設定CSS樣式，又用來供JS呼叫呢？ 同一個元素可以定義多個class，卻只能有一個id。你明白我的意思了吧？ id的優先順序高於class。所以如果對於某個特定的元素，我們想賦予特定的樣式，可以給它加id。但是反過來，如果我們一開始就是用id，你去加class是沒有效果的啦。

最後，關於Zeldman老先生講的classitis。我的理解是不要為了某個特定的樣式置頂一個特定的class。儘量創造一些能夠重複使用的class。而id由於不能重複，反而才容易造成iditis呢。到時候我們的網站會出現search-box-top, search-box-bottom，甚至search-box-under-the-header-but-above-the-main-menu，哈哈。更可怕的是，它們的屬性定義其實都一模一樣。