### 如何编写高效的 CSS 选择符 2017-04-24 大部分人看到下面的这一小段 CSS 代码： ``` #menus > li { font-size: 14px; } ``` 可能都会猜想浏览器会使从左到右匹配上面的规则，我们会想象浏览器先找到唯一的 id 为 menus 的元素，然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。 但是，事实上，CSS 选择符是从右到左进行匹配的。所以，上面的这条规则并不高效，浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id 是否为 menus。 样式系统从最右边的选择符开始向左匹配规则。只有当前选择符的左边还有其他的选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。 —- 《在 Mozilla UI 中编写高效的 CSS》 David Hyatt 以下是 David Hyatt 在书中提出的编写高效选择符指南： 一、避免使用通配规则 除了传统意义上的通配选择符之外，我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下，推荐仅使用 ID、类和标签选择符。 二、不要限定 ID 选择符 在页面中一个指定的ID只能对应一个元素，所以没有必要添加额外的限定符。例如，div#header是没有必要的，应该简化为#header。 三、不要限定类选择符 不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。例如，把li.chapter改成.li-chapter，或是.list-chapter更好。 四、让规则越具体越好 不要试图编写像 ol li a 这样的长选择符，最好是创建一个像.list-anchor一样的类，并把它添加到适当的元素上。 五、避免使用后代选择符 通常处理后代选择符的开销时最高的，而使用子选择符也可以得到想要的结果，并且更加高效。 六、避免使用标签—子选择符 如果有像#menus > li > a这样的基于标签的子选择符，那么应该使用一个类来关联每个标签元素，例如.menus-item。 七、质疑子选择符的所有用途 检查所有使用子选择符的地方，然后尽可能用具体的类取代它们。 八、依靠继承 了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。例如，对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。 摘自《高性能网站建设进阶指南——Web开发者性能优化最佳实践》 来源： http://hejx.space/2017/04/24/高效CSS选择器/ * * * * * ### 其他 [是什么阻碍了代码的重用？问题是否应该只解决一次即可？ - 知乎](https://www.zhihu.com/question/21011591) >[danger] **重用是有代价的，不要为了重用而重用，忘记我们的来处，我们是要解决问题的。** 没有人规定一个代码写出来必须要是重用的，不要觉得为了一个效果写出来的代码，只是一个地方用到了而已，没有被重用就很可惜，就很浪费，这种观点是错误的。不要被自己所束缚。 几乎每个人都会认为自己写的东西很棒，是最好的，其实并不是这样的，写出好的代码不是件容易的事情。我们最大的敌人是我们自己。 [我们要写真正的CSS！](http://mp.weixin.qq.com/s/a2aA7uOlEb6hhLTw7xu4eQ) [精通 CSS 选择器 - by.Genesis - 博客园](http://www.cnblogs.com/xyzhanjiang/p/5447406.html) [精通 CSS 选择器（二） - by.Genesis - 博客园](https://www.cnblogs.com/xyzhanjiang/p/5570726.html) [不可不看！CSS3中三十一种选择器用法 - Ranran - 博客园](https://www.cnblogs.com/ranran/p/31_css3_selector.html) [神奇的选择器 :focus-within](https://mp.weixin.qq.com/s/q-OaYqJfm08803-E5PJOhA) > 伪类和伪元素的区别 [Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代](https://juejin.cn/post/6917073600474415117) * * * * * last update：2018-5-17 16:54:54