CSS命名就應該最簡單、最直接，直搗黃龍。沒有HTML標籤，沒有層級，這些通通滾蛋，不要。為什麼不要，有三大原因：
1. 限制重用
我們會使用層級(#test
.test)，會使用標籤(ul.test)，可能是習慣(沒多想)，或是為了避免衝突。但是，我跟你說，從今以後，這種寫法讓他見鬼去吧（如果不是為了
改變CSS優先順序的話）。正如開篇論述的哲學觀點，你限制越多，越抑制了CSS的重用性。例如#test
.test{}這種寫法，裡面的CSS重用性多大，完全限死在了id為test的元素下，哪有重用性可言；又如ul.test，我勒個去，這個ul標籤十
有八九就是裝飾用的，往這兒一放，同樣CSS樣式的div標籤可以用嗎？哭爹喊娘，眼淚汪汪也不管用啊。所以，相信我，層級啊，標籤啊什麼的，通通見鬼去
吧。要知道，層級啊，標籤啊作用是什麼，是用來提高CSS優先順序，把那個字母長的讓人發毛的”!important”幹掉的。
2. CSS檔案大小
這瓜子雖小，吃多了也是可以填飽肚子的。所以，你的CSS名稱不要像老太太的裹腳布一樣，搞得又臭又長，如下圖所示的人人網那個冗長的CSS命名吧：
你看名稱的位元組數已經比屬性還大了，要是這些名稱都在15字元以內，乖乖，這個CSS檔案可以小個1~2K絕對沒有問題的。你看下圖這樣子的命名，這樣子的CSS排版是不是更舒服，更簡潔。
3. 降低了渲染效率
來個例子考考大家（以後我面試別人可能就會考這題），HTML如下：
<div id="test">
<ul class="test"></ul>
</div>
現在要給這裡的ul標籤一個樣式，比如說padding-left:25px;那麼下面四種寫法哪個渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}。
如果單純的ul與.test PK，我還真拿不定誰的渲染速度更快些。但是，一旦牽扯到層級與標籤，我100%確定，.test這種最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素，則#test ul{}速度是最快的，先id獲取，再tag獲取，這些可都是JavaScript內建的方法。但是，CSS的渲染方式則是屬於外太空系的了，《高效能網站進階指南》一書曾提到CSS的渲染方式是“從右往左” 渲染的，就拿#test ul{}舉例，先渲染頁面上所有的ul標籤，再去尋找id為test的元素，所以，出現#test div{}這種寫法的人都是傻×的，頁面先渲染id為test的元素？非也！先渲染頁面上所有的div，再去尋找其老爸有沒有id為test的元素。由於 這種渲染差異最大就200~300毫秒（補充：這裡的差異不是說單純一個樣式的差異，而是這些寫法氾濫的頁面的全部渲染，其渲染差異資料可以參見“翻譯-不同CSS技術及其CSS效能”一文），我們人一般是感覺不到的。所以，長久以來，也都不以為然。但是，我是絕對容不下這種寫法的，還有，要是讓我看到類似於ul#test{}這樣子的命名，不好意思，面試肯定過不了。
所以，CSS命名，只要出現了層級，出現了標籤，就是一次額外的渲染，層級越多，渲染的開銷也就越大，這就是為什麼一些前輩的文章會建議要儘量避免過深的層級。這也是為什麼要“無層級”，“無標籤”。
對於原則第一條“無ID”，其實與效能沒有多大關係，只是一般ID都與JavaScript有姦情，如果再牽扯到CSS樣式，如此複雜的三角關係，日後不好處理啊。
摘抄自http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/