標籤,用ID捏仍是用class捏?


想談一下幾個基本的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來得直觀。
最後想說的是……

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

css

相關文章
相關標籤/搜索