网站优化-------优化标记和样式

虽然图像占大大都网站页面重量的大部分，但挪用和实现这些图像的 HTML 和 CSS 也会影响总页面加载时候。您构建和命名标志的方式可以帮助您连结网站的可保护性和高性能；成心构造您的 CSS 和设想形式将使您可以专注于可再操纵性和网站表面背后的寄义。连结你的 HTML 和 CSS 清洁和成心义将致使更快的加载网站和更好的整体用户体验。在本章中，我们将先容在您的站点上加载 HTML、CSS、字体和 JavaScript 的最好理论。

清算你的 HTML

清洁的 HTML 是高性能网站的根本。虽然较旧的站点常常会遭到多个设想职员或开辟职员编辑和增加标志的影响，但即使是较新的站点也可以从完全打扫中受益——寻觅嵌入式或内联款式、未利用或不需要的元素以及命名欠安的类和 ID。

在第 1 章中，我提到我可以经过简单地清算其标志和款式将一个站点的页面加载时候收缩一半。我专注于消除臃肿的 HTML 和 CSS，这致使 HTML、CSS 和款式表图像文件的巨细更小。

检察您网站的 HTML 时，请留意：

应移动到款式表的嵌入式或内联款式不需要特别款式的元素（不需要的 HTML 元素，也称为“divitis”，将鄙人一节中先容）可以删除的旧的、正文掉的代码

假如一个网站已经被多个开辟职员或设想职员编辑过，能够会有一些看起来没有益用或不需要的标志。随着网站的老化，过期的技术（例如利用表格停止结构）常常会在没有被清算或更新为更新的最好理论的情况下继续存在。在消除任何过剩或过期的 HTML 时要无情。保存不需要或复杂的标志很少有很好的“以防万一”的来由；凡是最好杀死它并晓得，假如你真的需要，你可以在未来利用版本控制来援用它。

迪维蒂斯

“Divitis”发生在您的 HTML 中有很多除了帮助您设备内容款式之外几近没有其他用处的元素。当大量 div 元素取代更成心义的语义 HTML 元素时，凡是会发生 divitis，但任何范例的 HTML 元素都能够发生紊乱：

尚不清楚为什么在前面的示例中有这么多元素；也许跨度内的款式会发生一些奇异的工作；也许其他那些div对页面结构成心义。但这绝对是有题目标迹象，应当利用您的标志停止检查。凡是 divitis 表白代码作者对款式的级联特征感应手足无措，并希望尝试覆盖元素的表面和感受，并经过增加额外的父元素来利用 CSS 来实现方针。

Divitis 应当在你的标志中被根除。它增加了 HTML 和 CSS 的收缩，而且经过删除不需要的元素，您将为您的站点建立一个更成心义和更间接的条理结构。假如能够，请利用 HTML5 元素（例如header和article）来建立语义条理结构。更轻易了解应当若何编写 CSS，并为可反复利用的设想形式供给机遇。

大概简单地说：

Site Name

偶然，您需要为结构和语义结构保存一些元素，例如本示例中的 header 元素。凡是是情况下，检查和削减页面上的元素数目会让你大吃一惊；借助 HTML5 和 CSS 的强大功用，您将可以经过安定、轻量级的 HTML 条理结构完成很多工作。

语义

语义元素称号是那些暗示元素内内容范例的称号。杰出的语义元素挑选包括具有代表性的 HTML5 元素，如headeror nav，或类和 ID 称号，如loginor breadcrumbs。避免利用无意义的称号，如leftor blue，它们向用户描写内容的表面和感受，而不是内容的寄义。

将元素重命名为更具语义性将帮助您为页面建立更好的 HTML 结构，而且还答应您建立设想形式以在全部站点中重用。例如，这是一个带有一点点 divitis 的无语义 HTML 结构：

此侧边栏和登录表单的款式：

form { background: #ccc;}.right { float: right; width: 200px;}#form form { border: 1px #ccc solid; background: yellow; padding: 10px;}.heading { font-weight: bold; font-size: 20px;}

在这个例子中，这些元素当前的命名方式并没有什么特此外意义。很轻易覆盖款式表中.right其他地方的款式，而不会意想到它会影响利用此类称号的其他元素。

此外，尚不清楚这些款式中的哪些是可以在全部站点中重新操纵的设想形式。在这个 CSS 中，我们设备了一个backgroundfor #form，然后在我们的 CSS 中为这个特定的登录表单覆盖这个布景色彩。我们能够希望这个特别的登录表单脱颖而出。重命名和重组它以使其更具语义化将致使更易于了解的 CSS 文件和潜伏的设想形式：

我们用更语义化的结构和命名约定替换了现有的非语义结构。我们现在有一个侧边栏、一个清楚且唯一的表单称号，以及一个将表单元素组合在一路的无序列表。虽然它会发生更多的 CSS，但这现实上对我们代码的整体清洁度来说是件好事：

form { background: #ccc;}form ul { list-style-type: none; padding: 0;}h2 { font-weight: bold; font-size: 20px;}.sidebar { float: right; width: 200px;}#login { border: 1px #ccc solid; background: yellow; padding: 10px;}

如您所见，将一切无序列表保存在我们网站上的标准表单中以不异的方式设备款式很轻易。一样，h2我们的登录表单中的题目（在本例中为 ）应当与我们页面中的其他同级题目具有不异的款式。我们的.sidebar款式不太能够被未来对款式表的编辑覆盖，而且#login可以保存其很是怪异的款式。虽然这为我们的示例增加了几行 CSS，但它也能够会致使我们的 CSS 文件的其他部分被清算，由于我们可以消除其他款式，这些款式会覆盖表单和段落的款式，使其看起来像题目。

语义命名答应您随着时候的推移保护 HTML 和 CSS，由于随着时候的推移，它更易于阅读、测试和编辑。更清洁的 HTML 和 CSS 凡是会建立更小的文件，从而收缩页面加载时候，并下降随着网站老化而致使页面重量收缩的风险。由于它们更成心义，语义结构答应设想和款式的更多用处，从而缔造更好的终极用户体验。

可拜候性

除了语义标志的可编辑性和性能之外，清洁的 HTML 还可以使具有可拜候性需求的用户受益。语义 HTML 使内容条理结构对阅读器、搜索引擎和屏幕阅读器成心义。post利用和等新的 HTML5 标签aside，并经过题目、段落和列表等现有语义结构的实现，每小我都可以更轻易地拜候 Web 上的内容。视障人士的搜索引擎机械人和屏幕阅读器首要检察页面的 HTML 内容，而不是在利用了 CSS 款式并运转 JavaScript 动画和交互性的阅读器中显现它的方式。您的 HTML 越清楚、语义越多，这些用户的体验就越好。

Web 内容可拜候性指南 (WCAG) 供给了有关若何使您的网站可供残障人士拜候的更多信息。假如您利用的是清洁且语义化的 HTML 条理结构，那末您便可以很好地使您的网站易于拜候。万维网同盟 (W3C) 供给了完整的WCAG 2.0清单，以帮助您领会并满足一切当前的 WCAG 要求。

框架和网格

Web 上有很多有用的框架和网格，可以帮助希望建立网站但不想重新起头的设想职员和开辟职员。Bootstrap、HTML5 Boilerplate 和 960 Grid 是根本 CSS、HTML 和 JavaScript 的示例，可以帮助您启动网站设想。

但是，网格和框架是有价格的。由于它们旨在涵盖大量通用用例，所以它们将包括很多您网站上不需要的工具。这类无关的内容能够会障碍您的页面加载时候，而不是帮助您的开辟时候；假如您在起头实施网格或框架时不留意包括几多内容，您的网站上能够会加载很多不需要的资产、标志或款式。

以下是 HTML5 Boilerplate 框架中包括的一些款式。对于包括 、 或 元素的网站，它们会是有用的款式dfn，hr可是mark在不利用这些元素的网站上可以消除这些行：

/** * Address styling not present in Safari 5 and Chrome. */dfn { font-style: italic; }/** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;}/** * Address styling not present in IE 6/7/8/9. */mark { background: #ff0; color: #000;}

假如您真的想利用框架，请务必在终极用户尝试加载您的站点之前断根一切无关材料。请记着，网格和框架能够没法供给我们想要的语义结构，由于它们是通用的而且一刀切。有些，如 HTML5 Boilerplate，为您供给了您应当操纵的自界说构建选项，如图 4-1 所示。

在实现开箱即用的框架或网格以后，尽能够地清算页面的命名和元素结构。没有来由逼迫您的终极用户加载不需要的款式、标志或 JavaScript。

图 4-1。一些框架会在您在站点上实现它们之前为您供给自界说构建选项，例如Initializr的这个 HTMl5 榜样定制工具。操纵这些优化来削减标志、款式和剧本开销。

清算你的 CSS

一个沉思熟虑的 HTML 条理结构和对您网站结构和设想的沉思熟虑的挑选将为您设备清洁、易于编辑和高性能的 CSS。当您检查站点的现有 CSS 以寻觅清算它的方式时，请斟酌它若何反应您的 HTML 条理结构和设想挑选。也许你会看到：

寻觅未利用的元素、可以组合或重写以进步效力的款式，以及处置阅读器纷歧致的过期方式。随着网站的老化，我们需要定期检查我们的 CSS 并斟酌实施新技术和技术来改良页面加载时候。我们对网站条理结构和设想挑选背后的目标越沉思熟虑，我们的 CSS 就会越清洁。代码可保护性和网站性能齐头并进。

未利用的款式

假如你有一个现有的站点，首先要处理的 CSS 清算使命是删除未利用的款式。随着网站的老化，未利用的款式会在不经意间出现，给您的款式表增加臃肿感。未利用的款式能够来自您网站上已删除的元素或全部页面、已重命名或重新设想的元素，大概您不再利用的第三方小部件的覆盖。没有来由在款式表中保存未利用的挑选器或款式并逼迫终极用户下载它们；假如您需要回首历史以检察旧 CSS，您的版本控制将派上用处。

今朝有很多工具可供您查找潜伏的 CSS 以消除。Dust-Me Selectors是一款适用于 Firefox 和 Opera 的阅读器插件，可以扫描您网站的 HTML 以查找未利用的挑选器。在 Chrome DevTools 中，有一个 Audits 选项卡（图 4-2），可让您运转网页性能考核并检察未利用的 CSS 法则列表。

图 4-2。Chrome DevTools 答应您在任何页面上运转网页性能审计。考核成果中包括您可以清算的未利用 CSS 法则列表。

警戒这些工具的输出；Dust-Me 挑选器能够没有抓取您网站的每个页面，Chrome DevTools 只检察当前页面上的 CSS 挑选器（而不是挪用相一款式表的任何其他页面）。这些工具很是合适帮助您获得挑选器的初始列表以在款式表中检查，然后起头测试删除它们。

合并和紧缩款式

您网站上怪异元素的反复款式是分歧款式和周到设想的重要目标。检察您的款式表，寻觅组合或紧缩这些款式的机遇，由于它们将有助于您的代码的性能和可保护性。在这里，我们有两个具有类似款式的元素：

.recipe { background: #f5f5f5; border-top: 1px #ccc solid; padding: 10px; margin: 10px 0 0; font-size: 14px;}.comment { background: #f5f5f5; border-top: 1px #ccc solid; padding: 10px; margin: 9px 0 0; font-size: 13px;}

.recipe, .comment { background: #f5f5f5; border-top: 1px #ccc solid; padding: 10px; margin: 10px 0 0; font-size: 14px;}.comment { margin: 9px 0 0; font-size: 13px; }

.comment大概，问问你自己：为什么字体巨细和下面的边距略有分歧是有缘由的吗？假如您将款式组合在一路.recipe并.comment建立一个实在的形式会怎样？复杂性会下降，保护的轻易性会增加，更好的是，我们的 CSS 文件会更短！

.recipe, .comment { background: #f5f5f5; border-top: 1px #ccc solid; padding: 10px; margin: 10px 0 0; font-size: 13px; }

假如您发现这类形式会经常反复，您还可以概括类名，以便在全部站点中利用它，而不是继续将类名增加到这个逗号分隔的列表中。

同享很多款式的元素之间的纤细差别能够是由于很多缘由酿成的：PSD 模子的像素完善 Web 版本，意外更新到一个存在款式但不存在另一个款式的地方，等等。在全部款式表中，您能够会看到界说了很多分歧的像素特定高度、宽度、边距和添补。它们是成心地相互略有分歧，还是可以标准化？

寻觅这些机遇来标准化和建立形式。据猜测，这些元素成心同享不异的表面和感受；随着未来一个元素的设想发生变化，您能够希望另一个元素以不异的方式停止变动。将它们组合起来界说它们的同享款式将有助于节省您未来的开辟时候，而较短的 CSS 文件将帮助您收缩页面加载时候。

此外，您可以起头界说易于遵守的间距和字体巨细法则。使这些决议更轻易的一种好方式是检察您的根本font-size并利用它来告诉您的其他设想决议。假如您的首要内容是line-height1.4 em 的 14 px 字体，您可以做一些数学运算来建立：

题目字体巨细为 14 像素的倍数1.4 em 倍数的边距和添补基于 14 px 或 1.4 em 增量的自界说网格

background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackground-attachment

.recipe { background: #f5f5f5; margin: 10px 0 0; border: 1px #ccc solid; padding: 10px 0;}.comment { background: #f5f5f5; margin: 10px 0 0; border: 1px #fff solid; padding: 10px 0 0;}aside { background: #f5f5f5; margin: 10px 0 0; border: 2px #ccc solid; padding: 10px 0;}

我们可以为元素之间配合的款式设备简写属性，然后利用零丁的（速记）属性设备纤细差别的款式：

.recipe, .comment, aside { background: #f5f5f5; margin: 10px 0 0; border: 1px #ccc solid; padding: 10px 0;}.comment { border-color: #fff; padding-bottom: 0;}aside { border-width: 2px;}

偶然，重命名元素可以帮助您组合和稀释款式。看看这些气概类似的元素：

h3 { color: #000; font-weight: bold; font-size: 1.4em; margin-bottom: 0.7em;}#subtitle { color: red; font-weight: bold; font-size: 1.4em; margin-bottom: 0.7em;}.note { color: #333; font-weight: bold; font-size: 1.4em; margin-bottom: 0.7em;}

My page title

在这类情况下，可以重命名元素以建立更语义化的条理结构以及更简洁的 CSS。用你最好的判定。在这类情况下，我们将肯定究竟上#subtitle,.note和h3都是我们页面中语义上的第三级题目，并在我们的 HTML 中重命名它们：

My page title

经过在我们的 HTML 中重命名它们，我们已经自动组合了 CSS 中的原始款式，由于它们现在都属于h3款式块。我们可以增加特别性来变动此块下方的article和aside题目标色彩：

h3 { color: #000; font-weight: bold; font-size: 1.4em; margin-bottom: 0.7em;}article h3 { color: red;}aside h3 { color: #333;}

最初，假如你利用像 LESS 或 SASS 这样的 CSS 预处置器，你能够照旧会获得一个臃肿的 CSS 文件，其中有很多重新操纵或紧缩款式的机遇。杰出的计划和有目标的、可重用的设想形式将帮助您利用预处置器开辟 CSS，就像您编写常规 CSS 时一样。专注于连结任何mixin（界说一次的可重用款式块）尽能够高效，并确保随着时候的推移观察款式表的输出。臃肿的文件能够会鬼鬼祟祟，最好定期并延续检查您的 CSS 效力。

清洁款式表图像

组合和紧缩款式后，请检察从款式表中挪用的任何图像。请记着，图像占大大都网站页面重量的大部分，是以削减款式表图像请求的巨细和数目将大猛进步您网站的页面加载时候。

首先，寻觅缔造精灵的机遇。假如您在全部站点中利用了很多图标或其他小图像，则 sprite 可以极大地帮助优化请求。阅读“ Sprites ”，领会更多关于 sprites 若何进步性能以及若何实现它们的信息。

其次，随着网站的老化，它们的精灵也会老化。您能够会留意到现有的 sprite 包括过期或不再利用的图像。检查您现有的精灵：能否有可以删除的部分？你能清算利用这些部分的 CSS 吗？您可以清算然后以更合适的文件范例或更高紧缩率重新导出精灵图像吗？你的精灵越清洁，你的页面加载时候就越好。

接下来，寻觅机遇用 CSS3 突变、数据 URI 或 SVG 替换款式表图像。您可以在“ CSS3 ”中阅读有关建立突变的更多信息，以及有关若何在“ SVG ”中建立高性能 SVG 替换的更多信息。CSS3 突变是当前利用 CSS 实现的任何反复布景图像的绝佳替换品；它们在全部款式表中也很轻易编辑和重新操纵。用 CSS3 替换图像能够会很快加速您的网站。一样，用 SVG 替换款式表图像可以收缩页面加载时候，由于 SVG 文件可以替换款式表中的视网膜和非视网膜图像。

确保增加到款式表中的任何新图标或其他图像在您的网站设想中具成心义或目标。将这些记录在款式指南中，以便其他开辟职员或设想职员可以检察已将哪些图标增加到站点以及它们当前的利用方式。凡是，款式表图像蠕变会发生，由于不清楚哪些图像已经可以在全部站点中利用。我已经看到很多网站开辟了多种方式来利用各类图标和突出显现来指示警告或警报，而不是对峙单一的款式约定。当您检查款式表以寻觅设想形式的机遇时，请斟酌挪用的款式表图像的数目以及它们能否可以紧缩。

去除特同性

当谈到 CSS 时，特同性是关于若何编写挑选器以帮助阅读器肯定利用哪些 CSS 法则的术语。挑选器有很多种，各有各的份量；特同性是经过基于这些挑选器的公式计较的。假如两个挑选器适用于同一个元素，则具有更高特同性的挑选器得胜。

您经常会在 CSS 文件中看到过于具体的挑选器。这凡是发生在设想师或开辟职员试图增加权重以覆盖先前界说的利用于特定挑选器的款式时。例如：

div#header #main ul li a.toggle { ... }

为什么这个款式表作者挑选持续增加一切这些挑选器？为什么不能简单地设备款式：

.toggle { ... }

为了正确设备款式，作者能够真的需要一切这些特别性。但是，如此多的特别性也表白款式表或 HTML 条理结构中的某些内容能够会更有用力。由于 CSS 覆盖了之前过于具体的 CSS，是以常常会发生低效的挑选器，这是一件值得关注的工作，是以您可以找到需要清算的地区并进步效力。这类情况经常发生在有很多人打仗同一段代码的大型构造中。

曩昔，低效的挑选器被以为本质上晦气于性能，但现在对于高性能的现代阅读器来说，这已经不是什么大题目了。可是，清算挑选器照旧很聪明，由于它们可以帮助您保护前端架构。

你的 CSS 越高效，它的性能就会越好。削减特别性意味着利用 CSS 的自然级联功用更轻易覆盖款式，而不是增加额外的权重或!important法则。低效的挑选器和!important法则常常会使 CSS 文件变得臃肿。始终从最小、最轻的挑选器起头，然后从那边增加特同性。

优化网页字体

Web 字体为您的站点增加了更多请求和页面权重。字体是权衡美学和页面速度的典范例子；重要的是要专注于使字体尽能够高效，成心识地加载它们，并权衡它们对性能和介入度目标的影响，以确保它们值得包括在内。

加载收集字体以下所示：

@font-face { font-family: 'FontName'; /* IE9 Compatability Mode */ src: url('fontname.eot'); /* IE6-IE8 */ src: url('fontname.eot?#iefix') format('embedded-opentype'), /* Modern Browsers */ url('fontname.woff') format('woff'), /* Safari, Android, iOS */ url('fontname.ttf') format('truetype');}

@font-face { font-family: 'FontName'; src: url('fontname.woff') format('woff');}

然后，您将利用 将此字体利用于挑选器font-family，并包括备用字体，以防您的用户尚未加载新字体：

body { font-family: 'FontName', Fallback, sans-serif;}

为什么要包括后备字体？

您网站的一小部分拜候者的阅读器不支持收集字体，或​者禁用了收集字体加载。您的字体也有能够损坏或阅读器找不到它。假如用户的阅读器在列表中找不到第一种字体font-family，它将尝试第二种字体，依此类推。您的后备字体列表应包括一种与您的首要字体类似的字体、最少一种跨平台可用的字体（如 Georgia 或 Arial），以及一种通用字体，如sans-serif或serif。

Web 字体文件有多种巨细，从几千字节到 200 多字节不等。检查您的收集字体文件，看看它们有多大，并寻觅以下机遇来减轻它们的重量：

您能否只需要几个字符而不是全部字母表和一切标点标记，例如当您将字体仅利用于徽标时？字体能否支持多种说话？能否可以将说话支持削减到仅一个子集（例如拉丁语子集）？你能消除任何不需要的个体字符吗？

字符子集化是削减 Web 字体文件巨细的强大工具。假如您利用的是来自托管字体办事（例如 Google）的字体，您可以挑选仅加载某个字符子集。在此示例中，我们将利用西里尔字母子集加载 Google 的 Philosopher 字体：

假如您只想从 Google 托管字体加载某些字符，您也可以指定这些字符。例如，我们可以加载仅包括字符H、o、w、d和y的 Philosopher 字体：

像谷歌这样的内部托管字体更有能够已经为您的拜候者缓存，但假如它们没有为特定拜候者缓存，那末它们将需要额外的查找和来自内部域的请求才能获得。自托管字体可以节省额外的 DNS 查找，但不会在拜候者第一次拜候您的站点时被缓存。

自己托管字体的另一个益处是自界说字体文件。假如您托管自己的 Web 字体，您可以经过Font Squirrel 的 Webfont Generator 之类的工具运转它，并挑选自界说字符子集来优化字体文件，如图 4-3 所示。

图 4-3。Font Squirrel 的 Webfont Generator 答应您在字体文件当挑选自界说的字符子集。在这类情况下，我们挑选了 Basic Latin Unicode 表，并在我们的子集合增加了四个单个字符。

您能够还想为您的收集字体利用多种字体粗细。仔细斟酌加载几多字体粗细；当你利用更多的字体文件时，页面会变得更重而且需要更多的请求，这对性能有很大的负面影响。利用尽能够少的替换权重，并确保权衡美妙和字体性能之间的平衡（在第 7 章中阅读有关此挑选以及若何权衡它的更多信息）。

您可以对 Web 字体加载技术停止的另一项优化是仅在大屏幕上加载字体。这将消除智妙手机等小型装备上的请求和额外的页面重量，这些装备常常会对性能形成更大的影响（在“移动收集”中领会更多缘由）。利用媒体查询来利用收集字体：

@media (min-width: 1000px) { body { font-family: 'FontName', Fallback, sans-serif; }}

利用收集字体时，您可以采纳的最重要的办法是仔细斟酌它们的用处。记录何时以及若何利用特定字体粗细，以便在您网站上工作的其他人可以重新操纵此标志并领会何时合顺利用字体粗细。明白特定的显现权重应当只用于某品种型的题目，大概您为特别的设想形式保存文本权重。这将有助于教育在您的网站上工作的其他设想师和开辟职员，并有望帮助您的网站尽快运转。在“款式指南”中阅读有关建立款式指南的性能上风的更多信息。

建立可反复利用的标志

利用可反复利用的标志建立设想形式是随着站点设想的成长而连结性能的关键。当您决议站点的条理结构、结构和感受的寄义时，您有机遇仔细斟酌加载资产并为跨站点的标志重用缔造机遇。设想形式节省了开辟时候和页面加载时候。标志重用将：

为资产缓存供给机遇避免设想师或开辟职员重新发现轮子在增加新内容时消除不需要的资产请求帮助您隔离不再需要的款式和资产

经过标准化全部站点利用的色彩，记录可反复利用的形式（如微调器和精灵），并界说何时以及若何实现字体等资产，您可以让您的团队在站点成长时对页面加载时候做出明智的决议。

让我们以标准化色彩为例。检查您网站的 CSS 文件并找到一切益用的色彩值。实现了几多种分歧的灰度？当您在用户界面中显现警告指示符时，它们是利用一组分歧的色彩，还是有多种红色或黄色阴影？您的首要站点色彩若何：您能否有一个在全部站点中反复的十六进制值，大概主题四周能否存在亮度和饱和度的变化？

您在全部设想中的色彩变化越多，这些色彩的意义就越小，您的款式表就会变得越紊乱。将它们全数收集在一个地方，看看哪些可以稀释。当您缩小色彩挑选范围时，起头肯定为什么可以利用这些色彩。例如，List Apart 的形式库包括对何时利用某些色彩的描写（图 4-4）。

图 4-4。List Apart 的 Pattern 库包括对何时利用某些色彩的描写。

当我在一个有很多金黄色和深灰色的网站上工作时，我清算了款式表以使网站的色彩加倍分歧。我记录了当设想师想要利用粗体黄色、浅黄色、红色警告消息、绿色“已变动”消息等时利用哪个十六进制代码。我还检查并清算了一切灰色利用情况，肯定应当利用哪些值以及何时利用（例如#aaa禁用的文本和边框，#eee布景等）。在记录了色彩及其寄义后，我检查并用新的标准化值替换了现有色彩。这让我可以组合和稀释很多气概，由于现在有可反复利用的形式。这些尽力将主款式表文件削减了 6%，不但节省了未来的开辟和保护工作，还节省了页面加载时候。

气概指南

建立可反复利用的设想形式很是好，它们继续重用的关键是文档。款式指南对于很多受众来说都是很好的资本：编辑、开辟职员、设想师以及任何其他能够在您的网站设想和开辟最好理论方面追求指导的人。

款式指南展现了实现代码和请求资产的最好方式，使您可以确保在您的网站上工作的其他人也正在帮助使其尽能够高的性能。将您的网站徽标资产放在一个地方并将文件优化为尽能够小并以最合适工作的格式，将有助于确保未来的徽标实施也遵守最好理论。记录您网站的标准化和优化的加载指示器将使未来的设想师更轻易实现这类形式，而不是用一个新的、缓慢的、繁重的微调重视新发现轮子。现在投入到您的气概指南中将有助于确保您的网站在未来尽能够快地连结。

斟酌在您的气概指南中包括以下信息：

十六进制色彩值以及何时应当利用它们按钮类以及若何利用它们Sprites 以及哪些类对应于其中的哪