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