標(biāo)簽？ID？還是CLASS？

想談一下網(wǎng)頁設(shè)計前端幾個基本的HTML問題，都是圍繞著應(yīng)該怎樣使用HTML。

1. 多用有語義的標(biāo)簽，少用div和span，避免使用沒有class的div和span。

設(shè)想一下HTML的世界最初只有div和span這兩個標(biāo)簽，其實網(wǎng)頁依然可以寫得出來。更多標(biāo)簽的出現(xiàn)，其實是為了替代利用率高但不好書寫的 <div class=”{tagname}”> 和<span class=”{tagname}”> 來的。

想再接著多說一句的是，在HTML5里越來越多常見的div class組合或div id組合被直接命名為了新的標(biāo)簽。理由也是相同的，像header/footer/aside/nav/section/article都是我之前經(jīng)常使用的class或id。我甚至覺得w3c創(chuàng)造新html標(biāo)簽的工作很簡單，定期統(tǒng)計一下最常用的class和id，然后取前幾名作為新的標(biāo)簽名就行了。

上周還有人在微博上感慨那個“史上最牛的HTML代碼”：

					1
2
3
4

					<div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
</div>

再過幾年它真的也許會消失的。

反過來思考也可以，盡量使用有語義的標(biāo)簽名，實在想不出來合適的標(biāo)簽名了，再用div然后起個class或id。這樣的思路也不錯。

2. 不要濫用class而回避id，該出手時就出手。

和問題1同理，設(shè)想一下HTML的世界最初只有class沒有id，其實網(wǎng)頁依然可以寫得出來，語義依然表達得出來。無非就是會出現(xiàn)很多特殊的class唄。因此，我們也很好理解，id的出現(xiàn)，就是可以和class一起協(xié)作，使某些語義即使沒有現(xiàn)成的標(biāo)簽可以表示它，但依然可以把一般性和唯一性完美的結(jié)合在一起。

這里駁斥一個觀點：“盡量都使用class，因為控制樣式的時候class的優(yōu)先級是同級的，id的優(yōu)先級更高，它的出現(xiàn)會破壞樣式優(yōu)先級的平衡”。首先我覺得這是一個假命題，所謂的“平衡”是不存在的，也沒有必要去刻意維護，通過id來表示的內(nèi)容一定是相對特殊的，優(yōu)先級自然高一些，這樣的優(yōu)先級設(shè)計是如此的自然。我能夠接受的全部是class的適用范圍僅是一些底層的css基礎(chǔ)樣式，如oocss里的基礎(chǔ)樣式，或很多網(wǎng)站都會有common.css文件或general.css文件，里面的東西盡量用class沒問題。

另一個更重要的理由是，在HTML5里，除了id和class這兩個特性可以控制樣式之外，還可以通過特性選擇器來定義樣式，類似E[attr="..."]的寫法。我們會發(fā)現(xiàn)可以控制樣式的方式越來越靈活，選擇越來越多。這是Web發(fā)展的必然趨勢。當(dāng)其他人已經(jīng)在用id/class/data-*/tagname對樣式展開多重維度攻勢的時候，我們實在沒有必要把自己還關(guān)在class的世界里。

3. 盡量給每個表示布局的class或id換一個站在內(nèi)容角度的合理的名字。

比如兩列布局的左右側(cè)多半是正文和輔助信息的關(guān)系，那么就不建議用class=”left”和class=”right”而是傾向于class=”main-content”和class=”sidebar”，或者直接用article和aside。

在自適應(yīng)Web設(shè)計(responsive web design)如火如荼的今天，頁面上的某個元素處在網(wǎng)頁什么位置更像是個變量，所以通過位置來定義一個元素顯然是會承受很多額外的維護成本和擴展成本。當(dāng)改變發(fā)生的那一天，你發(fā)現(xiàn)自己的HTML代碼變得文不對題。曾經(jīng)的left跑到最上面去了，right變成了底部通欄，這都是很正常的變化。

實在沒什么語義的，比如為了給IE加圓角而增設(shè)的標(biāo)簽，或清除浮動用的額外的標(biāo)簽，再或者是基礎(chǔ)樣式的，和具體內(nèi)容無關(guān)的，再用div加表象的class來描述。

4. 盡量避免表示純樣式的class或id。

比如class=”f14 red”。印象中網(wǎng)上有很多拙劣的例子，也有很多深刻批判這種用法的文章，我想說的是，如果你非要這樣改樣式，那不如直接寫內(nèi)聯(lián)style來得直觀。

最后想說的是……

互聯(lián)網(wǎng)是一個快速發(fā)展的領(lǐng)域，它的快速發(fā)展甚至讓人們忘卻了很多傳統(tǒng)領(lǐng)域的停滯不前。在這樣的領(lǐng)域里工作，勇敢嘗試，關(guān)注新技術(shù)，把握新趨勢是如此的重要。不要拒絕新事物，不要被不思進取的人拖累，不要對大千世界失去好奇心和求知欲，方可永葆青春。

原文地址：http://jiongks.name/blog/html-or-id-or-class/