自分用CSSスタイルガイド

インデント・改行・空白

• 基本的にセレクタはインデントなし。
• 宣言（プロパティと値）の部分はセレクタの開始位置から半角スペース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つにまとめる。