以下是由 Nick Berens 的客座文章，他是 wisnet.com 的高级前端开发人员。 Nick 和他的团队多年来一直通过自定义样式指南构建网站。 在这些年中，Nick 一直在构建和改进一个工具来帮助这个过程。 我会让 Nick 解释理念和工具。
我敢打赌你听说过样式指南。 也许你听说过样式指南驱动的开发 (SDD)？
我是 wisnet.com 的前端开发人员，这是一家专门从事 PHP 和 WordPress 开发的代理机构。 这是关于样式指南和我们团队在样式指南驱动开发方面的经验的简要介绍。
在过去两年中，我一直使用我编写的名为 Atomic Docs 的工具来实践 SDD，这是一个前端样式指南生成器和 Sass 部分管理器。 我想介绍 Atomic Docs 和它的一些功能，这些功能使 SDD 成为我们工作流程中一个简单而必不可少的组成部分。
什么是样式指南？
在 wisnet，我们使用两种类型的样式指南：静态设计样式指南和更动态的前端样式指南。
设计样式指南
我们的设计样式指南是静态 Photoshop (PSD) 文件，用于编目项目的全局设计元素。 它们记录了项目的颜色、字体、标题、按钮状态、链接状态、列表等。
前端样式指南
我们的前端样式指南由 Atomic Docs 生成，提供与项目前端组件相关的代码的文档。 想想 Bootstrap 文档网站。 它为每个组件提供注释和标记示例，使其易于参考、理解和使用每个组件。
动态样式指南
动态样式指南是一个系统，允许样式指南中的组件与网站中的组件保持同步，而无需在两个地方都更新代码！
对于大型项目，动态样式指南是成功系统的关键。
什么是样式指南驱动的开发？
为了说明，我将简要概述我们在 wisnet 的流程。
从设计开始
在 wisnet，我们的样式指南流程从我们的设计师开始。 他们交接的每个项目都有两个交付成果。 一个传统的 PSD 完整页面布局的样本，以及一个记录项目全局样式的设计样式指南。
进入前端
完成后，PSD 样本和设计样式指南将交接给前端开发人员。 我做的第一件事是打开 Atomic Docs 并开始记录设计样式指南中定义的全局设计元素。
添加全局设计元素后，我会打开 PSD 样本，其中包含完整的样本。 由于我使用 Brad Frost 的 原子设计 原则，此时我开始分析设计并确定哪些设计元素将组合在一起构成设计的原子、分子、有机体、模板和页面。 以这种方式组织和管理组件是 Atomic Docs 真正有帮助的地方。
所有组件都构建、分类并记录在 Atomic Docs 中后，只需像使用乐高积木一样使用这些组件即可构建页面和视图。
后端
如果项目是一个应用程序，我会将静态视图以及 Atomic Docs 样式指南交接给后端开发人员。 使用样式指南作为参考，后端开发人员可以轻松地根据需要对前端进行调整，而无需通过将它交回给前端开发人员来中断他们的工作流程。
正如你可能猜到的那样，开发过程永远不会完全是线性的（团队之间仍然可以来回很多次），但是使用样式指南提供了一种通用的设计语言，它在项目的整个生命周期中强制执行设计和代码一致性。
SDD 的优势是什么？
通过在任何上下文中构建组件，你将获得模块化且可自由地在你的网站或应用程序中移动的代码
我们不是在设计页面，而是在设计组件系统。
Stephen Hay 的引言是 SDD 的核心。
我们不再构建一个在侧边栏上下文中为红色的按钮。 我们现在只构建一个红色按钮，无论它是在侧边栏、页脚还是页眉中，它都是红色的。
当你无视上下文进行构建时，副作用是前端代码库的可扩展性、模块化性和可维护性要高得多。
使组件更易于不太精通前端的后端开发人员和设计师使用
样式指南鼓励我们的设计师和初级开发人员在不深入了解 HTML/CSS/JS 的情况下快速构建页面和视图。 而且由于每个组件都是隔离的，因此更容易理解创建它的代码。
我完成的每个项目都有一个类似于 Bootstrap 的文档，展示了与每个组件相关的 HTML/CSS
无论项目大小，我们的团队完成的每个项目都对其前端设计系统进行了完整的文档记录。 这使得每个项目都更加易于维护。 它对我们合作过的拥有内部开发团队的组织尤其有用。 它使这些团队更容易进行更改和扩展其项目，并且非常有价值。
强制品牌完整性
由于样式指南包含项目的颜色和字体定义以及徽标和其他图形资产，因此可以将其视为设计真实来源。
关于 Atomic Docs
Atomic Docs 具有两个主要功能。
SCSS 部分管理器
能够将我的 CSS 分解成小的部分文件是我最喜欢的 Sass 功能之一。 管理所有这些部分文件并非如此。
这是一个分子类别和根 `molecules.scss` 文件的屏幕截图。
创建这种结构对于组织和整体开发人员理智来说是 **很棒的**。 但是随着项目的增长，创建和管理部分文件在我的工作流程中成为一个痛点。
Atomic Docs 提供了一个 GUI 来处理这些部分文件的创建和管理，以及将 `@import my-component` 字符串写入相应的根 `.scss` 文件。 通过此界面，您还可以重命名文件、将它们移动到不同的类别以及删除它们。
您可能认为我超级懒惰，创建部分文件并不是什么大不了的事，但它确实是我最喜欢的 Atomic Docs 部分。
（生成的）样式指南
使用 Atomic Docs 的最大优势也许是使用样式指南是多么容易。
- 没有复杂的配置文件
- 无需向 CSS 文件添加冗余的标记注释
- 随意命名您的组件和类别
- 对您使用的预处理器没有意见。 您可以使用 Grunt、Gulp、Code Kit、Prepros 或任何其他工具。
这并不是要贬低那些本质上更复杂的项目。 这种复杂性使它们能够拥有某些非常高级的功能。 我只是想要一个更简单的解决方案，我们的团队可以轻松上手，并且几乎没有摩擦。
使用 Atomic Docs 作为动态样式指南
Atomic Docs 可以配置为动态样式指南。 如果文件 atomic-head.php 位于项目的根目录中，Atomic Docs 会将其包含在它的 `<head>` 部分中。 因此，如果您正在使用简单的 PHP 应用程序，例如，在 atomic-head.php 中，您可以包含 `<?php require_once(my-path/db.php); ?>` 将数据库连接到 Atomic Docs 以及 `<?php require_once(my-path/functions.php); ?>` 共享您的应用程序的功能。
现在，您可以在创建的组件中使用应用程序的数据和功能。 然后，只需包含 `<?php include(components/modules/my-component.php); ?>` 到您的应用程序中即可。 由于此组件已包含在 Atomic Docs 中，因此您在 `components/modules/my-component.php` 中进行的任何更改都会反映在样式指南中以及您在应用程序中包含该组件的任何地方。
其他资源
Atomic Docs 非常适合我们在 wisnet 的工作流程和开发栈。 如果它不适合您，还有很多很棒的解决方案。
- Styleguides.io 收集了许多很棒的文章、书籍、工具和演讲，帮助您为您的团队做出正确的决定。
- 要更深入地了解样式指南，请查看 Medium 上这篇文章：文章。
结论
两年后，样式指南驱动开发已成为我们 wisnet 工作流程中宝贵的补充。 无论您使用的是 Atomic Docs 还是其他任何很棒的工具，我认为您都会发现 SDD 将有助于为您的所有项目提供设计一致性和可扩展性。
这确实是一个很棒的工具，它帮助我思考了我的代码以及如何在任何上下文中独立运行，而不是为具有特定目的的元素编写代码。 在创建原子和分子上花费的额外时间可以加快您在最后阶段的开发速度。 能够以可视化的方式查看所有元素本身也很棒（尤其是颜色和按钮）。 谢谢 Nick，你很棒！
如何在没有后端的情况下创建前端？ 当您说“我将静态视图交接给... 后端开发人员以对前端进行调整”时，您的后端开发人员是否正在编写前端 AJAX 和表单提交？
这取决于项目。 前端和后端之间的界限非常模糊。
对于 React 用户来说，JSX 标记部分是否有用？ 不确定，只是说出来...
为您的团队提供动态样式指南真是个好主意和便利。 有没有类似的解决方案？
刚下载了 Atomic Docs，但似乎无法在 Mamp 的新副本上运行。 也许是它需要写入新文件并修改现有文件的文件夹的权限？
很抱歉听到这个消息，欢迎您在 GitHub 上发布您的问题。
https://github.com/nickberens360/atomic-docs
我刚刚在我的 Mac 上安装了 Mamp，准备下载 Atomic Docs，您遇到了什么问题，解决了吗？
我刚刚在我的 Macbook 上安装了 Mamp，Atomic Docs 在我的端运行良好。
只是想确认它在我的 mamp 上也运行良好 :)
我刚尝试了这个包，并结合了 WordPress，这要感谢您提供的在线文档子部分。
我必须说，这是学习使用原子设计原则在像这样的动态样式指南系统中的一种很棒明智的方法。 工作出色 :)
顺便说一句，我想知道“JS”文件夹是否暗示即将发布的 JS-Snippet 功能？
如果确实如此，我必须承认我不知道如何将这些设计原则应用于 JS 架构。（include() / @import 等效项）也许使用类似 Browserify 的模块加载器。 我在这方面的知识不足。
另外，我希望能够为 AtomicsDocs 设置工作目录。我过去习惯不在主题文件夹中堆放源文件，因此能够在 WordPress 环境中的任何位置放置 atomics-docs 将是一个巨大的优势，恕我直言。
JS 文件夹目前是为了方便而存在的。但是，是的，我一直在考虑添加在添加新组件时创建 js 文件的选项。文档中的标签将是“Markup | Scss | Js”。几乎所有构建工具（grunt、gulp、webpack 等）都可以处理 Js 部分的串联。我为此使用 gulp-concat。
我们目前也正在重构代码，以便您可以设置工作目录。感谢您的反馈！
非常酷 :) 我迫不及待！
我在想一个用例：通过将公共“设计基础”放在主题的父文件夹中，为 WP 多站点/主题创建公共“设计基础”（同时保留特殊性）。
或者可以将其用作个人代码库，用于存放常见的模式代码片段，使用神圣的三位一体 HTML/CSS/JS :)
关于 JS，我曾想过使用您建议的经典 - 序列化 - 串联工作流，但我担心它不像 PHP/SCSS 的嵌套行为那样强大。
这是指如果想要严格遵循 Atom > Molecules > Organisms 和 DRY 范式。（在不同上下文中重复使用原子/分子）
恕我冒昧，在深入研究 atomicdocs.io 之前，我想请问，它与 Pattern Lab 之间有什么区别？乍一看，我确实欣赏其更易于理解的 UI，但是您能谈谈一些其他区别吗？谢谢！
嗨 Brian，除了浏览文档之外，我对 Pattern Lab 没有任何经验。如果您尝试过两者，我很想听听您的想法。
可以使用 Atomic Docs 在模块中使用 JavaScript 吗？