选择器

务必保持选择器简短高效。

通过页面元素位置而定位的选择器并不理想。例如 .sidebar h3 span{} 这样的选择器就是定位过于依赖相对位置,如果把 span 移到 h3 和 sidebar 外面时就很难保持其样式。

结构复杂的选择器将会影响性能。选择器结构越复杂(如 .sidebar h3 span 为三层,.content ul p a 是四层),浏览器的开销就越大。

尽量使得样式不依赖于其定位,尽量保持选择器简洁清晰。

作为一个整体,选择器应当尽量简短(例如只有一层结构),但是 class 名则不应当过于简略,例如 .user-avatar 就远比 .usr-avt 好。

牢记:class 无所谓是否语义化;应当关注它们是否合理。不要强调 class 名要符合语义,而要注重使用合理且不会过时的名称。

过度修饰的选择器

由前文所述,过度修饰的选择器并不理想。

过度修饰的选择器是指像 div.promo 这样的。很可能你只用 .promo 也能得到相同的效果。当然你可能偶尔会需要用元素类型来修饰 class(例如你写了一个 .error 而且想让它在不同的元素类型中显示效果不一样,例如 .error { color: red; }div.error { padding: 14px; }),但是大多数时候还是应当尽量避免。

再举一个修饰过度的选择器例子,ul.nav li a{}。如前文所说,我们马上就可以删掉 ul 因为我们知道 .nav 是个列表,然后我们就可以发现 a 一定在 li 中,所以我们就能将这个选择器改写成 .nav a{}

选择器性能

虽然浏览器性能日渐提升,渲染 CSS 速度越来越快,但是你还是应当关注效率。使用简短、没有嵌套的选择器,不使用全局选择器(* {})作为核心选择器,避免使用日渐复杂的 CSS3 新选择器可以避免这样的问题。

译注,核心选择器:浏览器解析选择器为从右向左的顺序,最右端的元素是样式生效的元素,是为核心选择器。