CSS Codeing Guideline.md

CSS Codeing Guideline.md

Google HTML/CSS Style Guide をベースに加筆修正を加えたものです。

CSSのバリデーション

可能な限り適切な CSS を記述すること。 CSS バリデーターにバグがある場合や独自の構文を必要としない限りしっかり書く。

バリデーションツール: W3C CSS validator

※エディタに Lint 入れても OK。ただし、バリデータに引っ張られすぎて本質から外れないよう、適切に判断する指標とすること。

CSSのスタイルルール

IDセレクタは使わない

スタイリング目的のみで ID を使用はしない。

クラスの命名

BEM という命名規則を採用します。

BEMとは

Block、Element、Modifier の頭文字を取ったものであり、要素を3つのどれかに当てはめて命名していく方法。

• Block → 構成のルートとなる要素
• Element → Block の子要素であり Element 単体では生きられない（Block がないとだめ）
• Modifier → 元となる Block または Element から変化した状態を表す

オブジェクト指向風に言うと

• Block は継承元のクラス
• Modifier は Block の派生クラス
• Elementはそれらのクラスに所属するメソッドもしくはプロパティ

MindBEMdingとは

MindBEMding は、BEM を CSS のクラス名に適用するために作られた規則。 CSS 界隈では BEM と呼ばれているものは MindBEMding のを指すことが多い。

Element は __（アンダースコア2つ）、Modifier は --（ハイフン2つ）、Modifier の Key と Value の区切りは _（アンダースコア1つ)でつなげて書きます。

.block
.block__element
.block__element--modifier
.block__element--modifier_value
.block--modifier
.block--modifier_value
.block--modifier__element

第一印象は気持ち悪いですが、慣れます。楽になります。

BEMのローカルルール

• 単語の区切りに「-」や「_」は使わず、キャメルケースを使う
• 基本的にシングルクラス設計をするが、冗長になりすぎる場合はマルチクラス設計も許容する（発生次第具体例を記載します）

タイプセレクタの記述

クラス名にタイプセレクタは記述しないこと。

/* -- Not recommended -- */
ul.block__list {}
article h1 {}
.block h1 {}

/* -- Recommended -- */
.block__list {}
.article__heading {}
.block__heading {}

ショートハンドプロパティ

可能な限りショートハンドプロパティを書くこと。

/* -- Not recommended -- */
border-top-style: none;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* -- Recommended -- */
border-top: 0;
padding: 0 1em 2em;

「0」と単位

値が「0」の場合は単位を省略すること。

margin: 0;
padding: 0;

小数点の頭の「0」

小数点の頭の「0」は省略すること。

font-size: .8em;

URI値の引用符

url() での URL 指定において、"" （ダブルコーテーション）や '' （シングルコーテーション）などの引用符を省略すること。

@import url(//www.google.com/css/go.css);

HEX形式のカラーコード

HEX形式のカラーコードは、省略できる場合には3桁で表記すること。

CSSハック

CSS ハックは「最後の手段」として考え取り入れること。 ユーザーエージェント別の対応のために CSS ハックを使う前に別の方法を試してみることを推奨。

CSSの書式ルール

プロパティの記述順序

あまり細かいことは気にしないで余裕があるときに CSScomb で整形するだけで良い。

Sublime text を使用するなら下記のパッケージを入れるとよい。

• CSScomb

CSScomb の設定ファイル: CSScomb.sublime-setting

ブロック単位のインデント

階層がわかるようにブロック単位でコードをインデントすること。

@media screen, projection {
  html {
    background: #fff;
    color: #444;
  }
}

プロパティの終端

プロパティの終端には必ず ; （セミコロン）を書くこと。

/* -- Not recommended -- */
.test {
  display: block;
  height: 100px
}

/* -- Recommended -- */
.test {
  display: block;
  height: 100px;
}

プロパティ名の終端

プロパティ名の終端には : （コロン）を下記、その後にスペースを入れること。

/* -- Not recommended -- */
.test {
  display:block;
}

/* -- Recommended -- */
.test {
  display: block;
}

セレクタとプロパティの分離

別々のセレクタとプロパティは改行して書くこと。

/* -- Not recommended -- */
a:focus, a:active {
  position: relative; top: 1px;
}

/* -- Recommended -- */
a:focus,
a:active {
  position: relative;
  top: 1px;
}

CSSルールの分離

別々の CSS ルールは 1行間空けて書く。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}