Go Wiki：Go CSS 编码指南

请在编辑此页面之前讨论更改，即使是微小的更改。许多人都有自己的观点，这里不是进行编辑争论的地方。

Go 的命名约定改编自 Medium 的风格指南和 SUIT CSS 框架中完成的工作。也就是说，它依赖于结构化类名和有意义的中划线（即，不只是为了分隔单词而使用中划线）。这样做是为了帮助解决当前将 CSS 应用于 DOM 的限制（即，缺乏样式封装），并更好地传达类之间的关系。

我们要求使用 LESS、SASS 等预处理器之上的纯 CSS。这是为了避免额外的工具依赖项。

JavaScript

语法：js-<targetName>

特定于 JavaScript 的类降低了更改组件的结构或主题会无意中影响任何必需的 JavaScript 行为和复杂功能的风险。如果您通过 JavaScript 与 DOM 交互，则必须使用这些类。在实践中，这看起来像这样

<a href="/login" class="Button Button--primary js-login"></a>

同样，在任何情况下都不应设置特定于 JavaScript 的类的样式。

组件

语法：[namespace-]<ComponentName>[-descendantName][--modifierName]

在编写 HTML 和 CSS 时，组件驱动的开发提供了多种好处

它有助于区分组件根的类、后代元素和修改。
它保持选择器的特异性较低。
它有助于将表示语义与文档语义分离。

您可以将组件视为封装特定语义、样式和行为的自定义元素。

命名空间（可选）

如有必要，可以使用命名空间为组件添加前缀。例如，您可能希望通过为所有组件添加命名空间前缀来避免库和自定义组件之间发生冲突的可能性。

.godoc-Button { /* … */ }
.godoc-Tabs { /* … */ }

这使得在阅读 HTML 时清楚哪些组件是库的一部分。

ComponentName

组件的名称必须用驼峰式大小写编写。

.MyComponent { /* … */ }
<article class="MyComponent">
  …
</article>

ComponentName–modifierName

组件修饰符是一个类，它以某种形式修改基础组件的表示。修饰符名称必须用驼峰式大小写编写，并用两个连字符与组件名称分隔。该类应除了基本组件类之外还包含在 HTML 中。

/* Core button */
.Button { /* … */ }
/* Default button style */
.Button--default { /* … */ }
<button class="Button Button--primary">…</button>

ComponentName-descendantName

组件后代是一个类，它附加到组件的后代节点。它负责代表特定组件直接对后代应用表示。后代名称必须用驼峰式大小写编写。

<article class="Tweet">
  <header class="Tweet-header">
    <img class="Tweet-avatar" src="{$src}" alt="{$alt}">
    …
  </header>
  <div class="Tweet-body">
    …
  </div>
</article>

ComponentName[aria-]

在几乎所有情况下，组件状态都可以使用 ARIA（aria-expanded、aria-disabled 等）表示，因此建议将其用于基于组件状态的修改。在极少数情况下，如果存在无法使用 ARIA 表示的状态，则可以使用格式为 is-stateName 的 CSS 类。CSS 状态名称必须为驼峰式大小写。切勿直接设置这些属性/类的样式；它们应始终用作相邻的类或属性。

JS 可以添加/删除这些属性/类。每个组件都必须为状态定义自己的样式（因为它们的作用域限定在组件中）。

.Tweet { /* … */ }
.Tweet[aria-expanded=true] { /* … */ }
.Tweet.is-blorked { /* … */ }
<article class="Tweet is-blorked" aria-expanded="true">
  …
</article>

颜色

优先使用小写十六进制值、RGB 或 RGBA，而不是命名、HSL 或 HSLA 值。在适用情况下使用简短的十六进制值。

正确

#fff;
#f1f2f3;
rgb(50, 50, 50);
rgba(50, 50, 50, 0.2);

错误

#FFFFFF;
#F1F2F3;
white;
hsl(120, 100%, 50%);
hsla(120, 100%, 50%, 1);

格式化

以下是部分高级页面格式化样式规则。

间距

CSS 规则应以逗号分隔，但应另起新行

正确

.Content,
.Content-edit {
  …
}

错误

.Content, .Content-edit {
  …
}

CSS 块应以一行（不是两行或 0 行）分隔。

正确

.Content {
  …
}
.Content-edit {
  …
}

错误

.Content {
  …
}

.Content-edit {
  …
}

引号

CSS 中的引号是可选的。我们使用单引号，因为从视觉上更清楚地表明字符串不是选择器或样式属性。

正确

background-image: url('/img/you.jpg');
font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial;

错误

background-image: url(/img/you.jpg);
font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;

编写简单选择器

避免简单选择器的序列（“复合选择器”）。

唯一的例外是动态添加的基于状态的选择器，用于指示状态更改（例如，具有 “[aria-expanded=true]” 的推文）。

正确

/* State-based simple selector. */
tweet[aria-expanded=true] {
  ...
}

错误

/* Sequence of simple selectors. */
button.foo.bar {
  ...
}

图片

在 html 标记中为图片添加高度和宽度属性，以帮助在页面加载期间最大限度地减少布局偏移。

<img src="url/to/image.png" height="240" width="160">

此内容是 Go Wiki 的一部分。