コーディングガイドライン

要素の分類

コンポーネント

コンポーネントとは

機能的に独立した再利用可能なUIのパーツです。コンポーネントは入れ子にすることができます。(例:.menu-listの中に.menu-item)

コンポーネントのクラス

コンポーネントに使用するクラスは、ハイフンで連結された最低2つの単語を使います。(例:menu-list)コンポーネント以外のエレメントやバリアントはハイフンを使わないので、クラス名にハイフンがあればそれはすべてコンポーネントです。
単語はできるだけ省略しないでください。

コンポーネントの例:

  • 検索フォーム(.search-form)
  • ニュース記事カード(.article-card)
  • 詳しく見るボタン(.more-button)

エレメント

エレメントとは

コンポーネントに含まれる構成要素です。

エレメントのクラス

エレメントに使用するクラスは、ハイフンなどを使わない1単語を使います。(例:button)2つ以上の単語が必要な場合は、ハイフンやアンダースコアを付けずに連結します。(例:firstname)
単語はできるだけ省略しないでください。

CSSセレクタのルール

  • 可能なかぎり子セレクタを使います。(例:.menu-item>.description)
  • 孫要素を指定する必要がある場合は子孫セレクタを使います。
  • 可能な限りクラス名を使用します。タイプセレクタの使用はできるだけ避けてください。ただし、構造に必然性がある場合は使用できます。(例:.menu-list>.li)

バリアント

バリアントとは

コンポーネントとエレメントに、機能や見た目のバリエーションを与えるためのクラスです。

バリアントの命名

ハイフン(-)から始まる名前をつけます。(例:-large)

cssによるスタイリング

コンポーネントのスタイリングのルール

コンポーネントの再利用性を高めるため、これらのプロパティをコンポーネントに指定しないでください。

  • position
  • margin
  • float
  • width,height(横幅や高さを固定したい要素については例外とします)

これらを指定する必要がある場合は、対象のコンポーネントが含まれるコンポーネントから子孫セレクタを使用して指定します。

例:


.article-list>.article-item {margin:0 0 1em;}

汎用クラス

汎用クラスの命名

アンダースコア(_)から始まる名前をつけます(例:_marginbottom-0)

汎用クラスの使用

慎重に使用してください。コンポーネントやエレメントのクラス名を使用してスタイルを使用できるときは使用を避けてください。