技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的な技術メモを残しているブログです。Qiitaの記事にするほどでもない細かいネタを投稿します。

CSSコーディングルール

スタイル

  • {の前は半角スペースを入れる
  • コロンの後は半角スペースを入れる
  • 行末のセミコロンは省略しない
  • 極力省略して書く
  • インデントは揃っていれば良いがスペース2つ推奨

良い例

#content {
  background: #fff;
  margin: 0 10px;
}

悪い例

#content {
  background-color: #ffffff;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 10px;
}

0以下の数値は頭の0を省略する

悪い例

font-size: 0.8em;

良い例

font-size: .8em;

理由 ファイルサイズ省略のため

同値は1文字にまとめて色指定する

悪い例

font: #ffccff;

良い例

font: #fcf;

理由 ファイルサイズ省略のため

単語はハイフンで区切る

悪い例

downloadform {
  width: 1000px;
}

良い例

download-form {
  width: 1000px;
}

0に単位をつけない

悪い例

margin: 0px;

良い例

margin: 0;

プロトコルは省略する

悪い例

background: url(http://sample.com/sample.gif);

良い例

background: url(//sample.com/sample.gif);

参考

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://github.com/styleguide/css