在CSS的世界里，文档是没有用的。由于文档对最终用户不可见，其价值往往被客户所忽视。此外，如果您是第一次记录代码，它可以是很难确定什么记录和如何最有效地做到这一点。

然而，记录CSS可以为您的项目提供很多帮助：从鼓励更好的代码实践到缓解新团队成员的入职。在本文中，我将解释记录CSS的好处，并分享我和Bitovi的团队认为是使文档能够为您工作的最佳实践，而不是相反。让我们深入了解它。

1.设置基本规则

当你和你的团队不清楚要记录什么或者你想如何工作的时候，很难得到文档上的支持。所以第一步就是要同意你将使用哪种约定，以及如何实现它们。您可以在活动文档中做到这一点，这样团队中的每个人都可以做出贡献。这样，随着您的方法变化或变得更加全面，您可以保持最新状态。共享的Google文档，代码回购的维基页面，或者（甚至更好）您的“生活方式指南”上的页面都是非常好的地方。

现在我们来看看可以包含的实际“基本规则”。

2.解释你的代码库的结构

了解你的代码如何组织允许任何人从第一天直接跳到行动。这样做的一个简单的方法是创建一个文件结构的地图，你可以解释它的内容和应该去哪里。这样做时要特别注意那些可能含糊不清的地方。例如，指示文件“ buttons.css ”包含按钮的样式不是很有帮助，但是指出“自定义”目录是主题的自定义样式所在的位置可以节省时间。

这是一个例子：

作为一个经验法则，记录那些需要澄清的地方。不是每个目录和文件都需要文档（就像在上面的例子中“字体”是不言自明的）。把自己置身于项目新人（或者记住那些曾经是你的那个人）的时候，并提供你希望得到的指导。这个想法是以一种对你来说不费时的方式来做到这一点，但是有助于避免重复的问题。

这里要指出的另一个关键要素是应该添加新的样式，以及应该遵循的任何步骤。上面的例子演示了这一点，但是考虑到CSS的继承性质，详细说明它可能是值得的。

例如，在我们使用Bootstrap作为底层框架的项目中，根据开发人员试图达到的目标，我们通常有三个新规则应该去的地方。所以我们添加了一个包含三个场景的文档指南：

情景＃1

如果要覆盖由Bootstrap定义的样式，则：

1. 找出规则在哪个样式表的引导框架中定义的。
2. 转到“src / styles / bootstrap-custom”。
3. 寻找相同的样式表。
4. 如果不存在，请在该目录中创建一个具有相同名称的新文件。
5. 添加你的覆盖，并指出任何重要的东西。
6. 最后，在“src / styles / style.less ”中导入新的样式表。

情景＃2

如果您想要添加一个不覆盖Bootstrap的新样式定义，并且该定义在应用程序的任何位置都可用，那么：

1. 转到“src / styles / custom”。
2. 找一个可以添加新样式的样式表（想想：这是一种定义按钮的样式，还是像mixin一样可重用的样式？），并将其放在最有意义的位置。
3. 如果没有一个样式表，放置这个新的样式是有意义的，然后创建一个新样式。
4. 按照我们的命名约定命名。
5. 添加你的新风格，并指出任何重要的东西。
6. 最后，在“src / styles / style.less ”中导入新的样式表。

情景＃3

如果你想为一个组件添加一个新的样式定义（这意味着它将只对该组件可用，无论应用程序中使用了哪个组件），那么：

1. 转到“src / components”。
2. 找到你想要的样式。
3. 在组件目录中找到组件的样式表。
4. 最后，添加新的风格，并指出任何重要的东西。

本指南：

• 为了保持我们的风格有组织。
• 保留根据我们建立的遗产工作的样式，因为覆盖是在正确的地方完成的。
• 避免开发人员编写过于复杂的规则。
• 防止样式泄漏到非预期的元素。

​
相关文章链接：
第一条和第二条在这里可以看到  完美CSS文档的8个最佳实践1
第三条和第四条在这里可以看到  完美CSS文档的8个最佳实践2
第五条和第六条在这里可以看到  完美CSS文档的8个最佳实践3
第七条和第八条在这里可以看到  完美CSS文档的8个最佳实践4