实现：清理 CSS 这时候，您应该对站点的总体设计有了比较贴切的感觉，而且对站点的设计规范（HTML、XHTML 等）有一定的了解。现在，终于到了更改站点本身的时候了。
提取 CSS 备份？测试？中转？ 每个公司和项目都有不同的备份和开发流程。但是应该准备好一些事情，使您在操作站点时无需担心破坏现有站点。这可能意味着备份站点，或者在另一台机器上处理站点的副本（或者在同一台机器上使用不同的 DNS，比如 http://staging.my-company.com）。只需确保当您改进时，不会扼杀实际的站点。
不管您的目标是 HTML 过渡版、HTML 严格版、XHTML 过渡版，还是 XHTML 严格版，都需要将样式拉入外部 CSS 样式表中。如果您已经将显示和样式混合在内容中，则无法保持一个易于维护的一致的站点。
Web 上有不计其数的文章介绍分割 CSS 和 HTML，所以我不再详细介绍（请参见 一节中的链接）。但是，您应该注意下列事项：
- 这应该是一个非常机械的 过程。您不尝试改进页面的外观。您仅尝试从 HTML 中获得 CSS。
- 不要担心优化和压缩您的 CSS 规则。只从 HTML 中获得它。您将在下一步骤中对规则进行一些处理。
- 您仍然不用担心验证，所以不必在意 <br /> 和未闭合的 <p> 标记。您将彻底解决这些问题，但不是现在。
完成之后，HTML 的顶部应大致如下所示：
1
2
3
4
5
6
| <![CDATA[
<head>
<title>The Starbuzz Bean Machine</title>
<link rel="stylesheet" type="text/css" href="starbuzz.css" />
<link rel="stylesheet" type="text/css" href="styledform.css" />
</head>]]>
|
本例具有多个样式表。这是可选的，但如果您已经获得站点的特定区域以及核心外观，我建议您这样做。
优化 CSS 获得 HTML 的所有样式之后，应该具有一个或多个 CSS 样式表。（是的，我知道 CSS 样式表是多余的 — 级联样式表。但我不知道如何编写，所以享受这个幽默吧。） 获取其中每一个，逐步进行处理。如果具有如下所示的内容：
1
2
3
4
5
6
7
8
9
| h1 {
color: #933;
font: Georgia;
}
h2 {
color: #933;
font: Georgia;
}
|
—则考虑将其压缩为如下：
1
2
3
4
| h1, h2 {
color: #933;
font: Georgia;
}
|
一点都不惊奇，是不是？但它只是看起来简单。考虑更现实的情况，h1 和 h2 语句是分隔在大量 CSS 样式表中的数百行。然后，更改其中一个，但另一个标题中的字体是错误的。
处理这种情况的一个办法是依字母顺序排列您的声明。是的，这非常痛苦，但它将确保 h1 和 h2 最终结合，table、td 和 tr 最终互相结合。将相似元素放在一起，然后压缩样式，这样做非常值得。
类似地，采取如下声明：
1
2
3
4
5
6
7
8
9
| h1 {
color: #933;
font: 16px Georgia;
}
h2 {
color: #933;
font: 12px Georgia;
}
|
您仍然应该消除公用元素，并将其集中起来：
1
2
3
4
5
6
7
8
9
10
11
12
| h1, h2 {
color: #933;
font: Georgia;
}
h1 {
font-size: 16px;
}
h2 {
font-size: 12px;
}
|
尽管此处仍有两个声明，但您已经在单个位置（在本例中是 h1）获得通用性。
处理所有 CSS 样式表，并确保尽可能地将其调优。压缩规则，以减少重复项，并尽量剔除规则。例如，如果每个高级元素具有 Georgia 字体设置，则考虑将此规则放入 body 部分中，并移除所有单个规则。越简单越好。
验证 CSS 这是可选步骤，但将会真正减轻您的负担。准备好 CSS 之后，对其进行验证（参见图 4）（在 一节中可以找到 CSS Validator 的链接）。与页面验证程序一样，CSS Validator 将确保 CSS与预期一样。无语法错误，无输入错误（参见图 5）。
图 4. CSS Validator 图 5. CSS 的成功验证 CSS 验证在技术上没有确保整个页面有效那么重要。事实上，有效的 HTML（或 XHTML）Web 页面可以具有无效 的 CSS（参见图）。但是，CSS 验证将确保一切都很完美和干净，您的手动工作将确保您的 CSS 得到优化。 |
