翻译google高效css 写法

网络整理 - 07-27

本文是翻译google的高效css写法一文的中文译文，希望能给大家带来更多css的了解。

使用高效的css样式

总体

（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 来模拟

文章地址：#UseEfficientCSSSelectors