HTMLマークアップをGoogleが推奨するコーディングガイドラインに合わせて調整しました。
Google HTML/CSS Style Guide
今回調整した内容は以下になります。
マークアップルール
プロトコル
埋め込みリソースからプロトコル表記（http:,https:）を省略
インデント
半角2スペースでインデント。インデントにタブとスペースを混在させない。
.txt-red {
color: red;
}大文字を使用しない
小文字のみを使用してマークアップ。
/* 非推奨 */
color: #F3F3F3;
/* 推奨 */
color: #f3f3f3;type属性
cssとJavaScriptのtype属性は省略。
HTML5ではデフォルトで解釈されるため必要ない為。
0と単位
「0」の値は単位を省略。
margin: 0;
padding: 0;小数点先頭の「0」を省略
小数点の値は先頭の “0”を省略。
font-size: .8em;16進法
可能な場合は3文字の16進表記を使用。
/* 推奨しない */
color: #eebbcc;
/* 推奨 */
color: #ebc;プロパティの記述順
アルファベットの順に記述する。
※ベンダープレフィックスは無視。例えば-moz接頭辞は-webkitの前に来る、などの順序は保つ。
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;ブロック単位にインデント
階層がわかるようにブロック単位でコンテンツをインデント。
@media screen, projection {
html {
background: #fff;
color: #444;
}
}プロパティ名の終端
プロパティ名の終端にはコロンの後にスペースを入れること。
/* 推奨しない */
h2 {
font-weight:bold;
}
/* 推奨 */
h2 {
font-weight: bold;
}宣言ブロックの分離
最後のセレクタと宣言ブロックの間にスペースを使用。
/* 推奨しない：スペースが不足してる */
#video{
margin-top: 1em;
}
/* 推奨しない：不要な改行がある */
#video
{
margin-top: 1em;
}
/* 推奨 */
#video {
margin-top: 1em;
}セレクタとプロパティの分離
別々のセレクタとプロパティは改行して記述。
a:focus, a:active {
position: relative; top: 1px;
}
/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}CSSの引用符
属性セレクタやプロパティ値の引用符にはシングルクォーテーションを使用。
※URI値には引用符を使用しない。
/* 推奨しない */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推奨 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}