在我最早開始寫css的時候，其代碼上的高自由度就一直很令我困惑。這就是說，同一個設計，如果讓不同的人來實現，最終的代碼一定是有差異的。但這存在一個問題，如果不同的人通過不同的方法以及代碼風格，都從外觀上實現了一樣的設計，將很難評價誰做得更好。想來也是，既然都實現了設計，達到了目的，css這種沒有程序邏輯的代碼中，又能找出什么來說明誰做得更出色呢？

而如今，我認同的觀念是，css這種描述性語言，仍然有著代碼上的質量評判。評判標準就是可維護性（Maintainability）和性能（Performance），用比較通俗的話說，好的css，要對開發者的工作友好（dev-friendly），也要對瀏覽器友好（browser-friendly）。 本文將說明如何從css選擇符的角度來提高css代碼質量。
關鍵選擇符與瀏覽器的樣式規則匹配原理

css選擇符的概念，在之前的css優先級詳細解析的開頭部分也有提到，是指每一條樣式規則中，描述把樣式作用到哪些元素的部分，也即{}之前的部分。在本文，還要額外介紹一個概念：關鍵選擇符（Key selector）。關鍵選擇符就是在每一條樣式規則起始的{之前的最后一個選擇符，如下圖：

css選擇符將確定后面的屬性定義要作用到哪些元素,因此存在一個瀏覽器根據css選擇符來應用樣式到對應元素的匹配過程。關于瀏覽器的樣式匹配系統，David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下內容：

    The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

意思是說，瀏覽器引擎在樣式匹配時，以從右向左的順序進行。在具體匹配某一條樣式規則時，這個從右向左的過程會一直持續，直到讀取完整個選擇符序列并完成匹配，或因某一個地方的不匹配而取消（然后轉到另一條樣式規則）。

至于為什么瀏覽器會選擇這樣的匹配順序，你可以看看Stack Overflow上的相關討論。大致上解釋一下的話，由于最右邊的關鍵選擇符直接表示了樣式定義應作用的元素，所以從右向左的順序更利于瀏覽器在初始匹配的時候就確定有樣式定義的元素集合，并更快地在找某一個元素的樣式時避開大多數實際沒有作用到的選擇符。

更好的css選擇符，是讓瀏覽器在樣式匹配過程中減少匹配查詢次數，以更快的速度完成樣式匹配，從而優化前端性能。這其中，也必須參考瀏覽器的對于樣式從右向左的匹配順序。
css選擇符的正確使用方式
更特定，更具體的關鍵選擇符

關鍵選擇符是瀏覽器引擎在樣式匹配時最先讀取到的部分，因此，如果你在某一條樣式規則中使用更特定、具體的選擇符，可以幫助減少瀏覽器的查找匹配次數。

比如說下邊這樣的選擇符：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表