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

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

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

設(shè)想一下HTML的世界最初只有div和span這兩個(gè)標(biāo)簽，其實(shí)網(wǎng)頁依然可以寫得出來。更多標(biāo)簽的出現(xiàn)，其實(shí)是為了替代利用率高但不好書寫的 <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)計(jì)一下最常用的class和id，然后取前幾名作為新的標(biāo)簽名就行了。

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

					1
2
3
4

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

再過幾年它真的也許會(huì)消失的。

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

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

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

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

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

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

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

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

實(shí)在沒什么語義的，比如為了給IE加圓角而增設(shè)的標(biāo)簽，或清除浮動(dòng)用的額外的標(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)是一個(gè)快速發(fā)展的領(lǐng)域，它的快速發(fā)展甚至讓人們忘卻了很多傳統(tǒng)領(lǐng)域的停滯不前。在這樣的領(lǐng)域里工作，勇敢嘗試，關(guān)注新技術(shù)，把握新趨勢是如此的重要。不要拒絕新事物，不要被不思進(jìn)取的人拖累，不要對大千世界失去好奇心和求知欲，方可永葆青春。

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