Go Wiki: Go CSS コーディングガイドライン

このページを編集する前に、些細な変更であっても、変更について議論してください。多くの人が意見を持っており、ここは編集合戦をする場所ではありません。

Go の命名規則は、Medium のスタイルガイドとSUIT CSS フレームワークで行われている作業から採用されています。つまり、構造化されたクラス名と意味のあるハイフン（つまり、単に単語を区切るためだけにハイフンを使用しない）に依存しています。これは、DOM に CSS を適用する際の現在の制限（つまり、スタイルのカプセル化の欠如）を回避し、クラス間の関係をより明確に伝えるのに役立ちます。

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 を読み書きする際にいくつかの利点があります

コンポーネントは、特定のセマンティクス、スタイリング、および動作をカプセル化するカスタム要素と考えることができます。

namespace (オプション)

必要に応じて、コンポーネントに namespace のプレフィックスを付けることができます。たとえば、ライブラリとカスタムコンポーネント間の衝突の可能性を回避するために、すべてのコンポーネントに namespace のプレフィックスを付けることができます。

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

これにより、HTML を読む際に、どのコンポーネントがライブラリの一部であるかが明確になります。

ComponentName

コンポーネントの名前はキャメルケースで記述する必要があります。

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

ComponentName–modifierName

コンポーネントモディファイアは、基本コンポーネントのプレゼンテーションを何らかの形で変更するクラスです。モディファイア名はキャメルケースで記述し、コンポーネント名とは2つのハイフンで区切る必要があります。クラスは、基本コンポーネントクラスに加えて 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>

色

名前付き、HSL、または HSLA 値よりも、小文字の 16 進数値、RGB、または RGBA を優先します。該当する場合は、短縮形の 16 進数値を使用します。

正しい

#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 ブロックは、単一の改行で区切る必要があります。2つではありません。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 マークアップの画像に height 属性と width 属性を追加します。

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

このコンテンツは Go Wiki の一部です。

go.dev は、Google の Cookie を使用して、サービスの品質を提供および向上させ、トラフィックを分析しています。 詳細はこちら。