標籤，用ID捏還是用class捏？

標籤：des   style   使用   檔案   io   art   

想談一下幾個基本的HTML問題，都是圍繞著應該怎樣使用HTML。
1. 多用有語義的標籤，少用div和span，避免使用沒有class的div和span。

設想一下HTML的世界最初只有div和span這兩個標籤，其實網頁依然可以寫得出來。更多標籤的出現，其實是為了替代利用率高但不好書寫的
</code> 和 來的>
想再接著多說一句的是，在HTML5裡越來越多常見的div class組合或div id組合被直接命名為了新的標籤。理由也是相同的，像header/footer/aside/nav/section/article都是我之前經常使用的class或id。我甚至覺得w3c創造新html標籤的工作很簡單，定期統計一下最常用的class和id，然後取前幾名作為新的標籤名就行了。
有人在微博上感慨那個“史上最牛的HTML代碼”：
    
    
再過幾年它真的也許會消失的。
反過來思考也可以，盡量使用有語義的標籤名，實在想不出來合適的標籤名了，再用div然後起個class或id。這樣的思路也不錯。
2. 不要濫用class而迴避id，該出手時就出手。

和問題1同理，設想一下HTML的世界最初只有class沒有id，其實網頁依然可以寫得出來，語義依然表達得出來。無非就是會出現很多特殊的class唄。因此，我們也很好理解，id的出現，就是可以和class一起協作，使某些語義即使沒有現成的標籤可以表示它，但依然可以把一般性和唯一性完美的結合在一起。
這裡駁斥一個觀點：“盡量都使用class，因為控制樣式的時候class的優先順序是同級的，id的優先順序更高，它的出現會破壞樣式優先順序的平衡”。首先我覺得這是一個假命題，所謂的“平衡”是不存在的，也沒有必要去刻意維護，通過id來表示的內容一定是相對特殊的，優先順序自然高一些，這樣的優先順序設計是如此的自然。我能夠接受的全部是class的適用範圍僅是一些底層的css基礎樣式，如oocss裡的基礎樣式，或很多網站都會有common.css檔案或general.css檔案，裡面的東西盡量用class沒問題。
另一個更重要的理由是，在HTML5裡，除了id和class這兩個特性可以控制樣式之外，還可以通過特性選取器來定義樣式，類似E[attr="..."]的寫法。我們會發現可以控制樣式的方式越來越靈活，選擇越來越多。這是Web發展的必然趨勢。當其他人已經在用id/class/data-*/tagname對樣式展開多重維度攻勢的時候，我們實在沒有必要把自己還關在class的世界裡。
3. 盡量給每個表示布局的class或id換一個站在內容角度的合理的名字。

比如兩列布局的左右側多半是本文和輔助資訊的關係，那麼就不建議用class="left"和class="right"而是傾向於class="main-content"和class="sidebar"，或者直接用article和aside。
在自適應Web設計(responsive web design)如火如荼的今天，頁面上的某個元素處在網頁什麼位置更像是個變數，所以通過位置來定義一個元素顯然是會承受很多額外的維護成本和擴充成本。當改變發生的那一天，你發現自己的HTML代碼變得文不對題。曾經的left跑到最上面去了，right變成了底部通欄，這都是很正常的變化。
實在沒什麼語義的，比如為了給IE加圓角而增設的標籤，或清除浮動用的額外的標籤，再或者是基礎樣式的，和具體內容無關的，再用div加表象的class來描述。
4. 盡量避免表示純樣式的class或id。

比如class="f14 red"。印象中網上有很多拙劣的例子，也有很多深刻批判這種用法的文章，我想說的是，如果你非要這樣改樣式，那不如直接寫內聯style來得直觀。
最後想說的是……

互連網是一個快速發展的領域，它的快速發展甚至讓人們忘卻了很多傳統領域的停滯不前。在這樣的領域裡工作，勇敢嘗試，關注新技術，把握新趨勢是如此的重要。不要拒絕新事物，不要被不思進取的人拖累，不要對大千世界失去好奇心和求知慾，方可永葆青春。