一些比較高效的CSS寫法建議

標籤：style   http   color   ar   使用   for   sp   div   on   

當瀏覽器解析html的時候，它構造了一個文檔樹來展現所有被顯示的元素。 它在特定的樣式表中去匹配元素，根據標準的css的層疊，繼承和順序規則， 在mozilla的實現中（可能其他的也是這樣），對於每一個元素，css引擎通過規則去尋找匹配，css引擎評估每一個規則是從右至左的，從最右的selector開始， 也稱之為key selector，直到找到匹配為止。

根據這個規則，越少的規則使用，css引擎將評估的越好。因此，移除沒有用的css是改善頁面效能的重要一步。之後，對於頁麵包含很多的元素的css規則，  最佳化這些規則也有利於提高頁面的效能。最佳化頁面效能最重要的一點在於使用明確的，避免不需要冗餘的，使引擎系統快速的匹配到元素而不需要花費太多的時間。興城市費永禮品

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

1. 使用了後代選取器

使用全域選取器作為key

view source print?

1	body * {...}

2	.hide-scrollbars * {...}

使用了標籤選取器作為key

view source print?

1	ul li a {...}

2	#footer h3 {...}

1. 使用子選取器和相鄰選取器

使用全域選取器作為key

view source print?

1	body > * {...}

2	.hide-scrollbars > * {...}

使用標籤選取器作為key

view source print?

1	ul > li > a {...}

2	#footer > h3 {...}

子選取器和相鄰選取器是低效的是因為對於每一個元素的匹配，瀏覽器不得不評估其他的一些元素，它需要雙倍的時間耗費在匹配上。同時，越少的精確的key，越多的時間花費在匹配元素上面。儘管如此，即使是不高效的，他們比後代選取器的使用的效果要好一點。

1. 過渡的限定選取器

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

view source print?

1	ul#top_blue_nav {...}

2	form#UserLogin {...}

1. 使用：hover在一些沒有：hover的元素上面

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

view source print?

1	h3:hover {...}

2	.foo:hover {...}

推薦的方式

1. 避免使用全域樣式

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

1. 將規則寫的越精確越好

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

1. 移除一些無用的限定

下面的這些限定是多餘的：1.id選取器被class 或者tag選取器限定；2.class被tag選取器進行限定（如果一個class只被用於一個tag，這也是很好的實踐）。

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

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

1. 使用class選取器取代後代選取器

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

view source print?

1	ul li {color:blue}

2	ol li {color:red}

應該這樣的使用

view source print?

1	.unordered-list-item {color: blue;}

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

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

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

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

一些比較高效的CSS寫法建議