urakey/HTML & CSS Coding Guideline.md

## HTML & CSS Coding Guideline.md

      
    Raw
  

              HTML & CSS Coding Guideline.md
            
          
    Google HTML/CSS Style Guide をベースに加筆修正を加えたものです。
全体にかかるルール

プロトコル

画像やその他のメディアファイル、スタイルシート、およびスクリプトを指しているURLからプロトコルを省略します。
※プロトコルを省略することで入手できない場合を除きます。
HTML:
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
CSS:
/* -- Not recommended -- */
.example {
  background: url(http://www.google.com/images/example);
}

/* -- Recommended -- */
.example {
  background: url(//www.google.com/images/example);
}
インデント

半角スペース2つでインデントすること。
タブの使用やタブとスペースを混在させるのは NG です。
HTML:
<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>
CSS:
.example {
  color: blue;
}
小文字を使用すること

HTML: エレメント、属性、属性値は小文字で統一すること。
CSS:  セレクタ、プロパティ、プロパティ値は小文字で統一すること。
※値が文字列の場合は除く。
HTML:
<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<a href="/">Home</a>
CSS:
/* -- Not recommended -- */
color: #E5E5E5;

/* -- Recommended -- */
color: #e5e5e5;
行末の空白

行末の余分な空白は必ず削除すること。
HTML:
<!-- Not recommended -->
<p>What?</p>_

<!-- Recommended -->
<p>Yes please.</p>
全体にかかるメタルール

エンコード

HTML:
<meta charset="utf-8">
CSS:
@charset 'utf-8';
コメント

必要に応じてコードを説明します。全てを説明しなくてよいです。
MEMOコメント

コードに MEMO: をコメントとして記述します。
※ 特記すべき内容の場合に使用します。
HTML:
<!-- MEMO: 横並びリストの空白対応のため `li` ごとの改行を削除しています  -->
<ul>
  <li><span>Apples</span></li><li><span>Oranges</span></li>
</ul>
CSS:
/* MEMO: 細かいレイアウトは◯◯参照 */
.example {
  color: #ff0000;
}
TODOコメント

コードに TODO: をコメントとして記述します。
※ 複雑な内容は、別途 Git で issue を立ててください。
HTML:
<!-- TODO: span タグを削除する  -->
<ul>
  <li><span>Apples</span></li>
  <li><span>Oranges</span></li>
</ul>
CSS:
/* TODO: キーカラー確定後に `#ff0000` を置き換える */
.example {
  color: #ff0000;
}