选择器

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

通过页面元素位置而定位的选择器并不理想。例如 .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 新选择器可以避免这样的问题。

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