上一期我们讲到了 完美CSS文档的8个最佳实践2 里面的第三条和第四条，
第一条和第二条在这里可以看到  完美CSS文档的8个最佳实践1

现在这篇文章就主要讲第五条和第六条，下面进入正文

5.记住一个风格指南的CSS文件

正确记录CSS的很大一部分与编写好的CSS有关，反之亦然。这意味着，即使您的CSS代码库的状态可能不是最好的，强制执行文档规则也可以将您引向更好的系统。

这是一个风格指南记录CSS的地方。其背后的想法是，风格指南可以帮助您确定一个良好的CSS结构，因为创建一个你需要区分：

• 定义应用程序外观的基线样式（包括您正在使用的任何CSS框架）
• 对特定组件进行的自定义，以及
• 对特定页面进行的自定义。

CSS的大部分应该由基线样式组成，因为它们在应用程序的任何位置都可用，并影响所有元素的默认状态。自定义样式应该在您添加具有特定外观和行为的组件的情况下进行，或者在页面中元素或组件的布局需要的情况下进行。

捕获应用程序如何在您的应用程序中工作的一个好方法是  创建一个样式指南sitemap。一旦你知道风格指南在你的应用程序中的样子，你可以记住元素。例如，如果您在样式指南中定义了按钮和导航的外观，那么应该在哪里添加新的样式和文档（在“ buttons.css ”和“ navs.css ”中）。但是，由按钮组成的导航呢？

有一个风格指南可以帮助你做出这个决定，因为你可以从显示和标记的角度比较按钮和导航的外观。我们来看一下这个例子：

<button type="button" class="btn btn-primary">主要</button>

<button type="button" class="btn btn-secondary">次要</button>

<button type="button" class="btn btn-emphasis">重点</button>

 

<button type="button" class="btn btn-primary disabled">主要</button>

<button type="button" class="btn btn-secondary disabled">次要</button>

<button type="button" class="btn btn-emphasis disabled">重点</button>

 

在这种情况下，CSS有两个可能的位置来定义按钮的导航：

1. 如果标记遵循其他导航的结构，使用链接列表或<nav>带有类似按钮的链接，则将导航样式添加到“ navs.css ”。
2. 如果您将使用的标记是，<button>那么将样式添加到“ buttons.css ”。你甚至可以添加它作为一个单独的样式表（如“ buttons-group.css ”）。在这种情况下，术语“导航”将不再合适，因为HTML按钮作为导航项目不易访问。

6.将你的样式表分成几部分

一旦将样式表分解为更易于管理的文件，则可以通过将每个样式分解为单独的部分来继续此练习。

首先，每个样式表至少应该包括一个标题和（如果有用的话）一个简短的描述。标题可以像文件名一样简单，大写看起来更像是一个标题（例如：“Buttons”为样式表“ buttons.css ”），或者它可以与文件名相同这个：

我发现在浏览器中调试代码时使用文件名特别有用，而且大多数情况下，当文件已经与其他文件一起编译时，我可以获得对文件所在的文件的引用。

另外请注意，我使用的评论风格与/** VS 打开   /*。这是JSDoc中用于解析应该包含在自动生成的文档中的注释的约定。我建议使用这种风格，因为许多生活方式指南生成器使用JSDoc格式，所以当你准备使用生成器时，你的代码将需要很少的额外工作。

无论如何，您可以使用其他样式来表示一个部分，如：

在某种程度上，这取决于你的团队认为是使一个部分脱颖而出的最佳方式。唯一的要求是/*在开始和*/结束时使用。真正重要的是，无论使用哪种方法，您都坚持使用它，并以一致的方式在您的CSS代码中使用它。

如果您认为说明在特定样式表中可能有用，请将其添加为第一条评论的一部分。例如:

这样做会强化它作为一个部分的想法。此外，尝试将描述分解成多行（Harry Roberts建议最多80个字符），以便在打开多个文件或在Github上阅读时更容易阅读。

在添加标题和描述之后，可以进一步将样式表中的样式分为多个部分。要做到这一点，想想如何从逻辑上解释样式表的内容是有道理的。例如，样式表“ buttons.css ”通常会有一个部分，按钮的默认样式是通过应用类来定义的.btn。然后会有额外的样式定义不同的颜色，尺寸和配置，可以结合使用以进一步定制其外观和行为。为每个样式创建节将使其更容易理解，并找到新的类或覆盖应显示在哪里。另外，当代码呈现在代码片段中时，看起来不那么令人感到恐惧，而对于很难判断样式开始和结束的长文件而言。

我们来看看这个比较例子。首先，一个没有部分的LESS代码块：

和相同的代码块与部分：