当我第一次写CSS，这是非常简单的，写的。后来，它慢慢地发现不规则盲目的写作可以达到的效果，但在实际开发中，更多的无用的工作或重复性的工作可以做，而CSS是没有效率的。因此，在开发的后期，要写有效的和可重复使用的CSS根据一定的规则。

首先，看看CSS代码的一小部分：


#菜单>李{字体大小：14px；}



可以想象，浏览器将从左到右匹配以上规则。我们会想象浏览器首先发现id是菜单的元素，然后将样式应用到它们的直接元素的LI元素中，看起来效率相当高。

然而，事实上，CSS选择器是从左到右匹配的，因此，上述规则是无效的，浏览器必须遍历页面上的每个LI元素，并确定其父的ID是否为菜单。

样式系统从右最右边选择器的左匹配规则开始。只有当当前选择器的左边有其他选择器时，样式系统才会继续向左移动，直到找到元素匹配规则或由于不匹配而退出。

编写有效的CSS选择器有以下常见规则：


1。避免使用匹配规则

除了传统的选通选择器之外，我们还结合了相邻的兄弟选择器、子选择器和符合属性选择器的后代选择，并且只推荐id、类和标记选择器。

两。不要限制ID选择器。

在页上，指定ID只能对应一个元素，因此不需要添加额外的预选赛。例如，DIV #头是没有必要，应简化为#头。

三。不限定类选择器

而不是定义类选择器与特定的标签，他们扩展类的名称根据实际情况。例如，最好是改变li.chapter to.li-chapter or.list-chapter。

四。让规则更具体，更好。

而不是试图写长选择器像OL里，最好是创建一个类like.list-anchor添加到适当的元素。

五。避免使用子代选择器

通常，子代选择器的开销是最高的，子选择器也可以得到期望的结果，并且效率更高。

六。避免使用标签mdash；subselector

如果有一个基于标签的subselector像#菜单>李>，一个类应该用来将每个标签元素，如as.menus-item。

七。查询所有使用subselectors

检查使用子选择器的所有位置，然后尽可能地用特定的类替换它们。

八。依靠继承

了解哪些属性可以通过继承人继承，从而避免这些属性重复规则。例如，列表样式图像指定为列表中的元素，而不是每个列表元素。请参阅继承的属性表来了解每个元素的继承属性。

从高性能网站建设先进的指南——摘录；mdash；Web开发者性能优化最佳实践

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。