你以為的CSS最佳寫法是錯的

非常聳動的標題！讓我們來看看以下哪一個 CSS/HTML 的寫法是比較對的。

https://gist.github.com/minipai/5569802

是A還是B？

其實沒有絕對的對錯，但是如果你的答案和某個CSS教學的投影片的內容一樣，覺得B才是正確版本，因為A沒有寫「有語義」的HTML，那你的觀念需要更新了，很可能比起B，A才是更好的寫法。

不信的話去看一下twitter bootstrap的原始碼，正是A的寫法。

B的寫法很接近所謂「最佳實踐」的寫法，如果把.box換成#box就更接近了。簡潔，富有語義的HTML，沒有多餘的class。唯一有問題的是… 這是十年前的「最佳實踐」。為什麼說是十年前？因為十年前正大約是網頁設計圈在推展semantic html的年代。

十年之前是什麼樣的環境？那是傳說中table layout的時代，HTML/CSS甚至多是Photoshop/Dreamweaver生產的。HTML和CSS混在一起，一同用來排版，上樣式。也就是說，那時要改網頁，要HTML和CSS一起改，有時改HTML有時改CSS。為了改善這個情形，HTML和CSS的功能要分離，HTML不可以包含任何改變樣式的能力，全部交給CSS，而HTML要「有語義」的寫，如此才方便用CSS來實作設計。

在完成HTML與CSS語義／樣式的分離運動之後，有好一段時間人們都用很簡潔的HTML來寫網頁。但是慢慢的有人發現這樣寫法還是有不足之處，那就是CSS的 code 沒有辦法重複利用。於是Nicole Sullivan在2011年發表了著名的演說Our Best Practices Are Killing US（slide），並發表了CSS Lint以及OOCSS的觀念，讓CSS的code reuse有個方針。

回頭看A和B兩個寫法，OOCSS會比較傾向A，但是只要沒有影響到可重複利用性，也不會絕對的說B的寫法是錯的。但是一般而論，另外一個要用到.box樣式的區塊，標題除了是h2，也可能是h3, h4，內容除了p也可能有li，所以要我選的話，我會用A的寫法。（h2, p, li 這些語義標籤放在div裡面）

OOCSS之後，還有另外一套SMACSS，觀念雷同，但是教學寫得比較清晰，有興趣的話也很推薦。我個人認為bootstrap的css class命名是走SMACSS的方式的，相當值得參考。