error-reporting.com

HTMLとCSSは今まで何となく書いてきたのですが、今回githubの公開リポジトリを作ろうした際に、

一度真面目にちゃんとした書き方を勉強しようと思い、Google HTML/CSS Style Guideを翻訳してみました。

英語はあまり得意じゃないので翻訳が違っていたらすみません。。

プロトコル
埋め込むリソースにプロトコルは除外して書く。

<!-- 良い例 http/httpsが省略されている -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 悪い例 http/httpsがついている-->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

/* 良い例 http/httpsが省略されている */
.example {
  background: url(//www.google.com/images/example);
}

/* 悪い例 http/httpsがついている */
.example {
  background: url(http://www.google.com/images/example);
}

インデント
インデントはスペース2つ。
タブやタブとスペースの混合は良くない。

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

大文字の使用について
小文字だけを使用する
全てのコードは小文字で書くべき。HTMLの要素や属性、属性値など。(text/CDATA)は例外。
CSSのセレクター名、プロパティー、プロパティー値も同様に小文字で書くべき。

<!-- 良い例 要素や属性が小文字-->
<img src="google.png" alt="Google">

<!-- 悪い例 要素や属性に大文字を使用している-->
<A HREF="/">Home</A>

/* 良い例 色コードに小文字を使用している */
color: #e5e5e5;

/* 悪い例 色コードに大文字を使用している */
color: #E5E5E5;

末尾の空白
末尾の空白は除去をする。

<!-- 良い例 末尾に空白がない -->
<p>Yes please.

<!-- 悪い例 末尾に空白がない -->
<p>What?_

エンコーディング
BOM付きではないUTF-8で書くこと。
<meta charset=”utf-8″>とHTMLに明記すること。
スタイルシートにはUTF-8は明記しない。

コメント
必要に応じて、可能な限りコメントを書くこと。
コメントはどこをカバーしているか、どのような目的かを書くことが好ましいです。

やるべきこと TODOの書き方
やるべきことは「TODO」として書いておくこと。
@@などの他の一般的なフォーマットは使わずに、「TODO」だけを使うこと。
ユーザー名やメーリングリストなどの連絡先を括弧内に含める。

{# TODO(john.doe): revisit centering #}
<center>Test</center>

TODOはコロンの後にやるべきことを書く。

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

今日はここまで！続きます。