自分用 CSS スタイルガイド

Category : CSS

2011年12月時点での 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つにまとめる。

最近 Sass を使い始めましたが、SCSS で基本的にこれと同じ感じで書いてます。CSS でも Sass でも、実際に使うときには圧縮したりするので、これらのスタイルは表には出ないです。
あと、いつも一人でやってるので自分が見やすいように書いてます。

他にも何かあった気がするけど思い出せないということは、たいしたものではないのでしょう。
長々と書いてきましたが、どれもこれも深い理由があるわけではないので、これからも色々変更されていく感じです。

Leave a Reply