瀏覽器如何讀取你的CSS選擇器有一個很重要的原則，那就是它們從右到左讀取。這意味這像 ul > li a[title="home"] 這樣的選擇器，a[title="home"] 將是最先被讀取的。
我承認(rèn)我并不經(jīng)常想這個問題......我們寫的css的效率是怎么樣的呢，瀏覽器渲染的速度又如何呢？
這是應(yīng)該是瀏覽器開發(fā)者應(yīng)該關(guān)心的(頁面加載更快，用戶就會更愉快)。Mozilla有一篇文章： about best practices . Google 當(dāng)然也很關(guān)心這個問題，他們也有這樣一篇文章：Optimize browser rendering 。
讓我們了解下他們主要倡導(dǎo)的東東，然后討論他們的實用性。
從右到左
瀏覽器如何讀取你的CSS選擇器有一個很重要的原則，那就是它們從右到左讀取。這意味這像 ul > li a[title="home"] 這樣的選擇器，a[title="home"] 將是最先被讀取的。這一部分通常被稱為 “key selector” （可否稱為“目標(biāo)選擇器” -_-!）選擇器的最后一部分，也是被選擇的標(biāo)簽。
ID's 是最有效率的，通用符是最慢的
有四種目標(biāo)選擇器：ID, class, tag和通用符�？聪滤麄兏髯缘男嗜绾�:
#main-navigation { } /* ID (最快) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (最慢) */
#content [title='home'] /* Universal */ 然后我們結(jié)合從右到左和目標(biāo)選擇器的概念，我們可以知道下面這個選擇器并不高效：
#main-nav > li { } /* 看著很快實則很慢 */
盡管這讓人有點費解......因為ID's是最高效的，瀏覽器可以通過ID迅速的找到 li。但事實是，li 標(biāo)簽是被先讀取的。
不要用標(biāo)簽修飾
死也不要像下面這樣干：
ID's 是唯一的，所以不需要用標(biāo)簽修飾，這只會讓它更低效。
如果你可以避免的話，也不要用它修飾 class 。class 不是唯一的，所以理論上你可以把它用在不同的標(biāo)簽。如果你愿意的話，你可以用標(biāo)簽控制不同的樣式，這樣你可能需要標(biāo)簽修飾（比如：li.first），但這樣做的人很少，所以，don't .
絕對沒有比用后代選擇器更糟糕的做法了
David Hyatt:
后代選擇器是CSS里最昂貴的選擇器，昂貴得可怕——特別是當(dāng)它放在標(biāo)簽和通用符后面時。
就如下面這個東東一樣，絕對的效率毒瘤：
一個選擇器渲染失敗比這個選擇器被渲染更高效
我不是很確定是否有更好的證據(jù)去證明這一點，因為如果你有大量的選擇器在CSS樣式表里無法找到，這樣的事情貌似很離奇，但一點必需注意的是，從右到左的解釋一個選擇器來說，一旦它找不到，那它就會停止嘗試。然而如果它找到了，那它就需要花更多精力去解釋了。
試想一下為何你這樣寫選擇器
思考下這東東：
#main-navigation li a { font-family: Georgia, Serif; } |
你可能不需要從 a 選擇器開始（如果你只是想換個字體）。下面這個可能更高效些：
#main-navigation { font-family: Georgia, Serif; } |
實用性
還刻前面提到的Mozilla的一篇文章？已經(jīng)有十年了。事實是：計算機比十年前變慢了（不是我理解錯了，還是作者想說現(xiàn)在的WEB越來越復(fù)雜了）。我感覺這東東在當(dāng)年似乎還更受重視。十年前我還是個21歲的英俊小生，當(dāng)然我不覺得那里我會認(rèn)識css這東東。所以我也無法跟你講以前的情況......但我覺得渲染效率的問題之所以沒被重視是因為這從來就不是一個大問題。
這是我的一些看法：不管怎樣上面提到的東東都是有意義的，你可以按照上面的方法去做，因為它并不會限制你的CSS制作。但你也沒必要太教條主義。如果你是個完美主義者，而之前又沒有考慮過那東東，那是時候去重新看一下你之前寫的一些樣式是否有改進(jìn)的地方了。如果你沒發(fā)現(xiàn)你的網(wǎng)站明顯的渲染緩慢，那大可別太在意，在以后的工作中多注意就行了。
超級快速，零實用性
我們知道ID's 是最高效的選擇器。當(dāng)你想讓渲染速度最高效時，你可能會給每個獨立的標(biāo)簽配置一個ID，然后用這些ID寫樣式。那會超級快，也超級荒唐。這樣的結(jié)果是語義極差，維護(hù)難到了極點。即使在核心部分你也不應(yīng)該見過這樣做的。
