css样式指南是关于如何使用和编写css代码的一组标准和规则。它通常包含全局品牌定义，如颜色和排版，以及一组可重用的组件，用于构建更一致和可维护的项目。
css样式指南应被视为每个项目要求的平等公民。
风格指南的定义不止一个。例如，维基百科说：
“风格指南（或风格手册）是一套用于文档编写和设计的标准，用于一般用途或特定出版物，组织或领域。（……）
风格指南建立并执行风格以改善沟通。为此，它确保文档和多个文档的一致性，并在使用和语言构成，视觉合成，拼写和排版方面实施最佳实践。“
css指南网站/ harry roberts说：
“（css样式指南应该包含）用于编写理智，可管理，可扩展的css的高级建议和指南。”
google html / css样式指南说：
“本文档定义了html和css的格式和样式规则。它旨在改善协作，代码质量和支持基础架构。“
所有这些定义都告诉我们样式指南的主要任务：帮助彼此了解如何阅读，编写和使用代码。至关重要的是要知道每个风格指南都是独一无二的，其定义，原则和结构应该是团队的努力，而不是一种有说服力的方式来遵循某人的逻辑或想法。
在使用css样式指南时，您应该记住以下五件事。
定义编码格式每个样式指南都有一套规则，可以帮助项目中的每个人以相同的方式编写代码。通过遵循这些规则，开发人员可以避免日常任务中的典型问题，例如合并冲突和linting错误。您的团队可以在项目早期就空格或制表符缩进首选项达成一致。其他常见规则是选项卡宽度，在文档末尾添加新行以及使用引号。
例如，wordpress样式指南定义了编写css声明的结构：
例如，wordpress样式指南定义了编写css声明的结构：
wordpress风格指南有喜欢的工具更漂亮或editorconfig，可以帮助你的团队产生格式良好的代码。确保在项目中包含配置文件。此外，您可能希望在readme文件中添加有关如何在不同代码编辑器中设置代码格式的注释。
同意命名约定css有许多不同的命名约定。最受欢迎的是bem，smacss和oocss，仅举几例。如果您的团队决定适应命名约定，那么每个开发人员都应该了解组件的结构。代码感觉它是由一个人编写的，这将提高可读性。另外，从js命名约定中隔离css命名约定总是一个好主意。
例如，lonely planet使用bem作为命名约定：
孤独星球风格指南，bem示例“命名事情很难，但值得做对。为了使它更简单，我们在类名中使用bem方法。bem还帮助我们避免交叉模块冲突，并从类名中表示意图和关系。“
–?孤独星球，命名
并非每个开发人员都会同意命名约定，但只要每个开发人员都遵循它，那就重要了。这就是为什么样式指南不应该由单个开发人员负责的原因之一，而是与每个开发人员共同努力的原因。在readme文件中添加关于命名约定决定的注释并不会有什么坏处。
我更喜欢在几乎每个项目上使用bem。我也熟悉其他命名约定。值得熟悉所有命名约定，因为如果您处理多个项目或多个团队，这可能会有所帮助。
定义编码规则编码规则应包括有关定义全局样式，变量，混合函数，函数等的决策。这些编码规则可以是任何事物，从排版到单位使用。
例如，lonely planet定义了排版用法。该团队决定通过不在全局范围内建立排版，而是通过将特定类应用于包装元素来避免跨项目的样式冲突。我只能猜测，但我认为团队在注意到问题后做出了这个决定，然后讨论了它，最后得到了一个协议。我可能不同意这个问题，但如果我是团队的一员，我会理解他们来自哪里。
孤独的星球风格指南，排版部分一旦团队对每条规则达成一致，你就应该坚持下去。不需要进一步讨论这个问题。这可以为你的团队节省很多时间。它还应该防止团队成员之间可能出现的分歧和争论。
例如，primer定义了四个主要断点。通过识别这些断点，创意团队可以在这些限制内设计页面和组件，开发团队可以更轻松地设置这些页面和元素的样式，而无需进一步猜测或讨论断点。
入门样式指南，断点部分我更喜欢将颜色，排版和断点定义为全局变量。这有助于我建立一个更加一致，可识别和可发现的品牌。
定义可重用组件（如果它们是样式指南的一部分）一些样式指南包括可重用组件，有些则不包括。只要有助于团队构建更好，可维护的产品，您在样式指南中保留的内容并不重要。
当组件是样式指南的一部分时，您应该考虑以下一些问题：
如果将组件放在站点/应用程序的不同部分，组件的行为如何？如果将组件放在另一个元素中，组件的行为如何？你能将组件拆分成更小的可重复使用的物品吗？样式指南组件应始终是产品的隔离颗粒。通过解决此标准，您可以更有效地维护，更新甚至替换组件。
例如，primer定义了一个popover组件。弹出气泡的内容可能是另一个组件，如按钮。如果主按钮发生更改，则会在每个组件（包括弹出窗口）上进行更新。
primer style guide，popover部分一个好的做法是为组件添加变体。您也应该隔离变体。如果需要具有不同文本大小和对齐的元素，请考虑为此特定组件使用两个单独的变体类。
当相同的变体出现在多个组件上时，您可以考虑添加实用程序类。实用程序类通常可以解决对齐，填充和边距等问题。
例如，primer定义了用于填充的实用程序类。弹出框组件使用实用程序类来实现与其他组件的一致间距。
我不喜欢将实用程序类添加到项目中，但是如果你可以证明添加它们的决定是合理的，那就去吧。
考虑使用工具进行样式指南某些工具（如kss或mdcss或stylemark或nucleus）可以帮助您直接从代码生成样式指南。所有这些工具都遵循相同的原则，即一种文档语法，它将解析代码中的注释并将其编译为静态页面。
一些工具，如stylemark和mdcss，支持markdown语法，如果您熟悉它，这可能很有用。
stylemark样式指南示例作为一个全局规则，除了提供示例之外，建议编写组件的用途，如何使用它以及可以应用哪些修饰符。
stylemark样式指南，bootstrap示例如果您不想自动生成样式指南，可以手动创建。任何方法都可以，只要不花太多时间。
我更喜欢使用kss和stylemark，因为我可以在几分钟内设置和配置新的样式指南。到目前为止，我没有偶然发现任何问题。我发现这些工具具有创建健壮且易于使用的文档的所有要求。
结论每个样式指南都具有或应该具有相同的目标 – 以提高一致性和可用性。通过标准化您的代码，并应用统一的设计原则，您可以创建一个独特的烹饪书，其中包含“注意事项”，可以帮助您的团队更有效，更一致地构建产品。
插件：logrocket，一个用于网络应用的dvr
https://logrocket.com/signup/
logrocket是一个前端日志记录工具，可让您像在自己的浏览器中一样重放问题。logrocket不是猜测错误发生的原因，也不是要求用户提供屏幕截图和日志转储，而是让您重播会话以快速了解出现了什么问题。它适用于任何应用程序，无论框架如何，并且具有从redux，vuex和@ngrx / store记录其他上下文的插件。
除了记录redux操作和状态之外，logrocket还记录控制台日志，javascript错误，堆栈跟踪，带有标题+正文的网络请求/响应，浏览器元数据和自定义日志。它还使用dom来记录页面上的html和css，重新创建即使是最复杂的单页应用程序的像素完美视频。