代码风格指南

• 请尽量将行保持在最多 80 个字符。
• 在命名任何事物时，优先考虑清晰度而不是简洁性。
• 页面、部分和布局以 .liquid 或 .md 结尾。

标记标记永久链接

在大多数情况下，我们使用 LiquidJS 和 Markdown 来编写标记。如果您需要在任何地方使用常规 HTML，请编写 HTML5，但优先考虑严格的 XHTML 风格。

• 使用格式良好的标记；元素嵌套正确，并且不重叠。
• 以小写形式编写元素和属性。
• 引用所有属性。
• 使用尾部斜杠前的空格自闭合空元素： (<hr />)

风格风格永久链接

本网站在 SCSS 语法中使用 Sass。在重写任何内容之前，请确保您正在使用我们提供的类，除非您可以证明这样做是合理的。

• 使用 Brad Frost 撰写的风格 以确保清晰度
  • 请注意，较旧的类尚未使用此风格，但我们会在一段时间内进行重构。
  • 使用 sl- 全局命名空间。
  • 使用 Harry Roberts 倡导的类前缀，尽管我们使用的集合要简单得多
    • c- 用于组件。示例：sl-c-card。
    • l- 用于布局。示例：sl-l-grid。
    • is- 和 has- 用于状态。示例：sl-is-active。
    • js- 用于专门为 JavaScript targeting 创建的类。示例：sl-js-toggle-navigation。
  • 使用 BEM 语法。
    • 块 - 整体组件对象。示例：sl-c-card。
    • 元素 - 块的任何子元素。示例：sl-c-card__header。
    • 修饰符 - 任何变体。这可以放在块上。示例：sl-c-card--primary。它也可以放在元素上。示例：sl-c-card__header--large。
• 尽可能保持类扁平化，避免嵌套过深。
• 避免使用元素选择器，除非您正在使用包装器实用程序来定位内部的所有内容（例如，围绕 markdown 块或其他长文本块的类，以正确设置其所有元素的样式）。这专门用于当使用类没有意义时。请注意何时这样做。我们可以在代码审查中为您提供有关此类实例的反馈。
• 对于变量、混合、占位符选择器或类的命名，请使用一般到具体的 approach。有关更多信息，请参阅 这篇文章。
• 将逗号分隔的选择器写在单独的行上。