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 の読み書きにおいていくつかの利点を提供します。

• コンポーネントのルート、子孫要素、および変更のためのクラスを区別するのに役立ちます。
• セレクターの特異性を低く保ちます。
• プレゼンテーションのセマンティクスとドキュメントのセマンティクスを分離するのに役立ちます。

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

名前空間 (オプション)

必要に応じて、コンポーネントに名前空間を接頭辞として付けることができます。たとえば、すべてのコンポーネントに名前空間を接頭辞として付けることで、ライブラリとカスタムコンポーネント間の衝突の可能性を回避したい場合があります。

.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 が推奨されます。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 ブロックは、1 つの改行で区切る必要があります。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">