インデント・改行・空白

• 基本的にセレクタはインデントなし。
• 宣言(プロパティと値)の部分はセレクタの開始位置から半角スペース2つ分インデントする。
• @media 内など、ネストされている場合はその中のセレクタはアットマークルールの開始位置から半角スペース2つでインデントする。
• セレクタが複数ある場合は基本的にカンマで改行するが、擬似要素・擬似クラスが違うだけの場合は同一行でもよい。
  (リセット CSS などは除く)
• 宣言ブロック開始の波括弧 { は最後のセレクタと同じ行に書き、直後に改行を入れる。
• 宣言ブロック終了の波括弧 } の直前に改行を入れる。
• 各宣言ごとに改行する。基本的にはセミコロン ; の直後。
• 値が複数ある場合(背景など)に、それが長すぎると感じたら各値ごとに改行する。そのとき、値の開始位置は揃える。
• 複雑なグラデーションなど、1つの値が長い場合は分かりやすい位置で改行する。
• ルールセットの前後には1行の空白行を入れる。
• セレクタの + などの接続詞の前後には半角スペース1つ分の空白を入れる。
• 宣言ブロック開始の波括弧 { の直前には半角スペース1つ分の空白を入れる。
• プロパティと値の間にあるコロン : の直後に半角スペース1つ分の空白を入れる。前には入れない。
• 宣言終了のセミコロン ; の直前には空白を入れない。
• 環境があるならば、保存する前にルールセットごとにコロン : の位置を揃える。
  (IDE などで整形できる場合。手動ではやらない)

@media screen {

  body {
    background: #fafafa;
    color     : #101010;
  }

  body > header,
  body > footer {
    display: block;
  }

  a:link {
    color: #08a;
  }

  a:visited {
    color: #80a;
  }

  a:hover, a:active {
    color: #0a8;
  }

}

省略・短縮・単位・命名・文字列

• 最後の宣言のセミコロン ; を省略してはいけない。
• 数値が 0 の場合、その単位は省略する。
  (書いてもよい)
• line-height の値の長さの単位は書かない。
• font プロパティは使わない。
  (色々と面倒くさいので)
• それ以外の短縮形は、そちらをメインに使う。
• <time> 形式の単位は基本的に ms ではなく s を使う。
• アニメーションなどの <identifier> はハイフンつなぎで書く。
• content プロパティなどで挿入する文字列に英数以外があったらエスケープする。
  (元の文字列はコメントで残す)

コメント

/*!
 * 重要なコメント
 * 重要なコメント
 */

/*
 * 複数行のコメント
 * 複数行のコメント
 */

/* 大見出し
----------------------------------*/

/*-- 小見出し --*/

/* その他 */

• ルールセットではなく宣言にコメントをつける場合には、セミコロン ; の後に半角スペース1つ分を空けてから「その他」スタイルで書く。
• 「大見出し」の見た目は気分で変えてもいいが、統一すること。

プロパティを書く順番

基本的には次に従う。が、特に細かい理由のあるオーダーではないので気が付いたら適宜修正する。

E {
  display
  position, top, bottom, left, right, z-index
  clear, float
  margin, margin-(top | bottom | left | right)
  padding, padding-(top | bottom | left | right)
  border, border-(top | bottom | left | right)-(width | style | color)
  border-*
  width, height, box-sizing
  box-*
  background, background-*
  color
  font-(size | weight | style | family), font-*
  line-height,
  text-*
  vertical-align, white-space, 他テキスト関連
  その他
  content
}

その他

• 基本的には図書館方式。
• なるべく複雑なセレクタは書かない。
• 可能な限り CSS ハックは使わない。
• 同じ宣言を持つセレクタはまとめてもよいが、全て1つにまとめるのではなく役割ごとにまとめておく。
• クオーテーションはダブルクオーテーションを使う。
• フォント名はダブルクオーテーションで囲む。
• 実際に使うファイルは1つにまとめる。