优化您的 Web 站点 接手一个可维护的 Web 站点并将其打磨、抛光、流线化（4）

look_w

流线化 CSS CSS 是一个可以事半功倍或事倍功半的地方之一。通过在站点或者至少是页面范围应用几个规则，就可以获得巨大的效果，但是通过应用许多特定的规则，您可以获得难以置信的详细的、极具魅力的页面。问题在于使用所有这些全局规则、伪选择器，以及仅应用于标有 “i-hardly-ever-appear” 类的段落元素中的图像的样式，您就可能开始让 CSS 膨胀起来。当您具有从未使用过的样式表规则（糟糕但不可怕）或互相冲突或覆盖的规则时，确实会让人心烦，而且是一个潜在的大问题，CSS 膨胀就会发生。要获得组织良好且可维护的站点，您的工作就是摆脱这两个问题。
挖掘未使用的规则 您应该已经通过 CSS 验证器（请参阅  部分中 HTML和 CSS 验证器的链接，以及本系列的上一篇文章，其中详细介绍了 CSS 验证器的使用）运行了您的页面。这将暴露其中大多数问题，即使执行的操作并不是那么清晰。首先，如果验证页面并发现几个 CSS 规则没有使用，不要立即断定您可以删除这些规则！ 当您构建由多个页面甚至是整个页面使用的样式表时，您将使规则仅应用于站点页面的一个子集。您可以争论说，只有应用于站点每个页面的规则属于站点范围的 CSS，但这种逻辑只是说起来比做起来容易的典范。
接下来要进行一些必需而且乏味的工作。您将必须至少运行站点页面的大量取样来查明是否有一些规则没有在整个站点中使用。至少尝试 10 个页面，对于每个页面，尝试并记录下没有使用的规则（未使用的规则通常比使用的规则要少得多）。然后，一旦获得一个好的样本之后，就会看到哪些规则没有显示在任何页面上。尝试在样式表中将其注释掉，看看发生了什么。当然，随着 CSS 规则慢慢稳定，站点具有了 100 个或更多的页面，真正能将此测试出来的惟一方法是尝试站点上的每个页面，并看看有什么影响美观的地方没有。
不幸的是，必须指出，有时候这一优点不值得付出努力。您的页面将不会更快地加载，但是 CSS 将比较干净，而且是站点上真正发生的操作的更好的表示。在多数情况下，最好的解决方案是尝试并删除任何明显未使用的规则。但是如果在整个站点上使用了 10 个 CSS 样式表，或者单个样式表具有数百个规则，那么您可能会忙一整天。
忽略重叠规则 尝试根除互相重叠和覆盖的规则甚至是一项更加劳动密集的任务。它只关乎构建应用于页面的层次结构。在纸上，在头脑中，或者使用工具。（如果您找到了，就告诉我们！）例如，如果已经获得应用于整个页面的任何全局规则，则这位于层次结构的顶部。然后是应用于页面主体标记或可能一个 p 标记的任何规则。然后是应用于特定 p 标记或div 的规则，等等。您最终将得到一个级联 —— 浏览器应用的相同种类的级联。顶部的规则，然后是其下的规则，都应用到页面和样式表上。更具体的规则覆盖更一般的规则。所以，应用于具有 “acoustic” 类的 “guitars” div 中链接的规则将替换并覆盖为整个页面设置的标记。
此处的问题在于构建和分析此层次结构都是非常乏味的。您已经看到应用于整个页面的规则，然后确保应用到元素上的其他任何规则都不会受最顶层规则的影响。换句话说，如果没有任何元素是由高层规则设置样式，因为更具体的规则始终有效，那么您应该摆脱那个未使用的规则。
例如，假设具有如下 CSS 规则：

1 2 3 4 5

body {     background: #fff;     color: #777;     padding: 50px; }

然后，假设您的站点策略（已文档化并向整个团队解释了，对吗？如果您是一位独立开发人员，您是否已经将它们应用于显示？）指明所有页面在下列四个 div 元素之一中维护其内容：一个 div 用于页眉，一个用于页脚，一个用于导航，一个用于内容。每个 div 具有一个 ID 来标识它所提供的功能。所以您可能具有一些附加规则，如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

body {     background: #fff;     color: #777;     padding: 50px; } <b>div#header {     background: inherit;     border-bottom: 1px dashed #ccc;     color: #000;     padding: 50px; } div#nav {     color: #888;     padding: 50px; } div#footer {     clear: both;     font: 10px Verdana, sans-serif;     padding: 10px 0;     text-align: center;     color: #000 } div#content {     background: inherit;     color: #777; } </b>

此处的问题在于如果您将所有页面放在这四个div 的其中一个中，那么在不覆盖的情况下，body 选择器中的 color: #777; 规则永远不会得到应用。每个 div 都具有自己的 color 来覆盖 body 选择器。但您如何发现这些东西呢？通过大量的试验、错误，有时候还需要一点点运气。所以您将必须自己决定是否值得去查找并删除这些实例。
但是，这里也有一些真正的好处：通过删除规则可以应用到的最具体的元素中尽可能多的规则，意味着您的整个页面具有比较少的规则。这同样意味着，如果您添加新内容，那么您不必疑惑它为什么显示为宽字体的粉色文本。可能不会有大量规则应用于其上，因为它没有使用 ID 或 CSS 类进行标记，或插入到样式元素中。越简单越好，意味着您可以设计而非删除应用于新内容的其他规则。