高效css 寫法

以下文章是  翻譯 google高效css寫法

文章地址：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors 

使用高效的css樣式

總體

避免一些低效的key selectors去匹配大量的元素能夠加速頁面的展現 。

細節 

當瀏覽器解析html的時候，它構造了一個文檔樹來展現所有被顯示的元素。 它在特定的樣式表中去匹配元素，根據標準的css的層疊，繼承和順序規則，

在mozilla的實現中（可能其他的也是這樣），對於每一個元素，css引擎通過規則去尋找匹配，css引擎評估每一個規則是從右至左的，從最右的selector開始，

 也稱之為key selector，直到找到匹配為止。

根據這個規則，越少的規則使用，css引擎將評估的越好。因此，移除沒有用的css是改善頁面效能的重要一步。之後，對於頁麵包含很多的元素的css規則， 

最佳化這些規則也有利於提高頁面的效能。最佳化頁面效能最重要的一點在於使用明確的，避免不需要冗餘的，使引擎系統快速的匹配到元素而不需要花費太多的時間。

下面的這些規則被認為是低效的 

（1）使用了後代選取器

1.使用全域選取器作為key 

eg:body * {...}
.hide-scrollbars * {...} 

2.使用了標籤選取器作為key

eg：ul li a {...}

     #footer h3 {...} 

（2）使用子選取器和相鄰選取器

1.使用全域選取器作為key

eg:body > * {...}
.hide-scrollbars > * {...} 

2.使用標籤選取器作為key

eg: ul > li > a {...}

 

      #footer > h3 {...}

子選取器和相鄰選取器是低效的是因為對於每一個元素的匹配，瀏覽器不得不評估其他的一些元素，它需要雙倍的時間耗費在匹配上。同時，越少的精確的

key，越多的時間花費在匹配元素上面。儘管如此，即使是不高效的，他們比後代選取器的使用的效果要好一點。

（3）過渡的限定選取器

eg：ul#top_blue_nav {...}
form#UserLogin {...} 

id選取器是唯一的，包含了tag或者class的限定僅僅是增加了一些無用的資訊（瀏覽器去評估） 

（4）使用：hover在一些沒有：hover的元素上面

eg:h3:hover {...}

   .foo:hover {...}

 在非標準模式下面。ie7，ie8將忽略這些規則。在標準模式下面，可能會導致一些效能的退化

推薦的方式 

（1）避免使用全域樣式

允許一個元素去繼承它的祖先，或者使用一個class去應用複雜的元素。

（2）將規則寫的越精確越好

偏向使用class ，id，少使用tag

（3）移除一些無用的限定

下面的這些限定是多餘的

1.id選取器被class 或者tag選取器限定

2.class被tag選取器進行限定（如果一個class只被用於一個tag，這也是很好的實踐） 

（4）避免使用後代選取器，特別是包含了一些無用的祖先元素

eg：body ul li a{...} 制定了一個無用的body限定，因為所有的元素都是在body中。

（5）使用class選取器取代後代選取器

eg：如果你需要兩個不同的樣式（一個無序列表，一個有序列表）

不要使用下面的樣式

ul li {color:blue} ol li {color:red} 

應該這樣的使用 .unordered-list-item {color: blue;}

     .ordered-list-item {color: red;}

如果你一定要用後代選取器，建議你使用子選取器

（6）避免使用:hover在一些沒有串連的元素上面（對於ie序列的） 

如果你使用：hover在一些不需連線的元素上面，ie7,8會認為他們是無用的。建議使用事件onmouseover 來類比

--------END-------