是的，您应该创建一个网络风格指南

已发表: 2015-02-09

样式指南，也称为模式库，是确保您的设计在您的网站增长或新团队成员处理 Web 项目时按预期进行的好方法。每种样式或模式都是您网站设计元素的一组标记和样式。

现代风格指南通常显示为实际网页，显示网站或应用程序设计中的不同元素。当多个人甚至多个团队正在处理一个 Web 项目时，样式指南可以消除视觉元素应该是什么样子的猜测工作。这是让每个人都在同一页面上以保持项目一致性的好方法。

让您的团队步入正轨，让您的代码保持干燥

除了视觉设计，样式指南有助于确保 CSS 文件不会失控。我们都经历过重复的代码，所以让我们努力保持代码的可维护性并且没有任何绝对必要的东西。如果团队中的每个人都可以在一个地方看到所有样式，那么很容易看出当前存在哪些样式，因此它们不会在样式表中重复。

因为您的风格指南是一个包含模块设计和其他设计元素的集合，所以很容易看出新的设计元素是否符合既定标准。

众所周知，网页设计往往有点疯狂。好消息是，有效的网页设计，尤其是在使用样式指南时，都在您的控制范围内。风格指南的范围从非常简单到非常复杂。我在这里提供了一些想法来帮助您入门。

风格指南-01

包含标有十六进制颜色的样本是个好主意。你未来时间紧迫的自己会感谢你的！我不记得有多少次我问过或被问过多少次，“那个十六进制颜色又是什么？” 快速参考肯定会对每个人都派上用场。

描述性标题占位符可以帮助您的团队了解布局中的元素需要在什么样的上下文中使用。

样式指南还应包括建议的标题层次结构。哪个是 h1、h2、h3 等等？诸如主标题、子标题和侧边栏小部件标题之类的描述性词也消除了很多未来的猜测。

不要忘记包含不太常见的排版元素，例如块引号。您必须指定所有文本示例，即使是很少使用的示例。如果您对块引用或推荐有特定的标题和正文样式，请使用与更常用元素相同的细节来指定它们。

包括对您项目的图像的一般处理。图像是否需要边框或独特的不透明效果？有悬停交互吗？如果是这样，请在您的风格指南中找到它。如果有多种治疗方法，包括每一种，并定义何时使用某些治疗方法。

风格指南-02

从用户体验的角度来看，链接、导航和表单元素是三个非常重要的鸭子。您无疑知道文本链接、按钮和导航样式必须包含在您的样式指南中。但是，很容易忘记为每个样式包括正常、悬停、访问和活动样式的实例。将这些记录在案，以确保您网站的每个细节的一致性。

当出色的样式与表单合并时，没有比在样式指南中展示所有 Web 表单元素更好的方法了。这是一种很好的方式来绘制和盘点所有表单元素，哪些有效，哪些无效，以及哪些缺失。

具体来说，以下是表单样式要包含的一些关键组件：

如果您有幸从头开始创建风格指南这一壮举，我会为您提供一些有用的考虑。

我个人喜欢从一个空白的 HTML 文件开始，然后从那里开始。将此样式指南链接到实际网站或应用程序的 CSS。这样一来，更改就会反映在两个地方，您不必担心维护两个 CSS 文件。

首先盘点您网站的所有元素，然后将每个元素所需的准确标记添加到您的样式指南中。听起来很吓人？

首先评估页面网格，然后用排版和调色板等重要元素填充样式指南，随着您的工作添加更多模式。更多的设计模式可以包括图像、块引用、侧边栏样式、按钮和表单样式。

相信我。这是值得花的时间。提醒一下，没有什么是永久的，一切都可以轻松调整和扩展，这也很好。

如果您追求速度并且手动输入所有样式不适合您，那么有一些很棒的工具可以轻松创建和使用可重复使用的模式。

例如，Jeremy Keith 的 Pattern Primer 将生成文件夹中所有模式的列表。这是一个简单的 PHP 工具，用于将代码片段转换为模式库。您将看到呈现为 HTML 的模式。

另一个不错的选择是 Kyle Neath 的 KSS，它也是样式指南文档的绝佳工具。这些生成的自动样式是一组指南，可帮助您生成与 CSS 文档相关的 HTML 样式指南。 KSS 旨在与 CSS 预处理器一起工作，并适应许多 CSS 框架。

众所周知，一个网站永远不会完成。如果需要新元素，只需添加即可轻松扩展您的生活方式指南。

您最初的样式指南可能与您最终构建的页面不同，但它是测试新样式的绝佳机会，并且对于针对多个浏览器进行设计特别有用。

想要一些很棒的风格指南的真实例子吗？你说对了：

美国代码
邮件黑猩猩
销售队伍

通过在您的设计中提供一致性，您的样式指南使网站扩展和未来的网络增强变得容易。随着样式的添加和修改，此文档是让团队了解并展示您的样式项目的好方法。