Google HTML/CSS 規約

この記事では、Google が推奨する HTML および CSS の記述フォーマット規約を紹介し、良好な個人のコーディング習慣を身につけることを目的としています。

一般的なスタイル規約

画像、スタイルシート、スクリプト、その他のメディアファイルの URL のプロトコル部分を省略します（http:,https:）。ただし、ファイルが両方のプロトコルで利用できない場合を除きます。この方式は protocol-relative URL と呼ばれ、HTTPS と HTTP のどちらでページにアクセスしても、ブラウザは同じプロトコルでページ内のリソースをリクエストするため、バイト数を節約できます。

<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* 不推荐 */
.example {
  background: url("https://www.google.com/images/example");
}
/* 推荐 */
.example {
  background: url("//www.google.com/images/example");
}

一般的なフォーマット規約

インデント

インデントはスペース2つとし、タブやタブとスペースの混在は使用しないでください。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

大文字小文字

以下はすべて小文字で記述します：HTML 要素名、属性、属性値（text/CDATA を除く）、CSS セレクタ、プロパティ、プロパティ値。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png.html" alt="Google">
/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #E5E5E5;

末尾のスペース

<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

一般的なメタ規則

エンコーディング

HTML では <meta charset="utf-8"> でエンコーディングを指定します。CSS ではデフォルトが UTF-8 のため、指定は不要です。

コメント

コメントを使用してコードを説明します：含まれるモジュール、機能、利点。

タスク項目

未完了のタスクは @@ などの他のマークではなく、TODO を使用してマークします。

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

HTML スタイル規約

ドキュメントタイプ

HTML ドキュメントには HTML5 のドキュメントタイプ：<!DOCTYPE html> を使用します。

空要素は自己クローズする必要はありません。<br>次のように記述しないでください：<br />。

HTML の正確性

可能な限り正しい HTML を使用します。

<!-- 不推荐 -->
<title>Test</title>
<article>This is only a test.
<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

セマンティック

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/index.html">All recommendations</a>

マルチメディア要素のフォールバック

画像、動画、canvas アニメーションなどのマルチメディア要素には、アクセス可能な代替コンテンツを提供してください。画像には代替テキスト（alt）、動画と音声にはテキスト版を使用できます。

<!-- 不推荐 -->
<img src="spreadsheet.png.html">
<!-- 推荐 -->
<img src="spreadsheet.png.html" alt="Spreadsheet screenshot.">

関心の分離

マークアップ、スタイル、スクリプトを分離し、相互の結合を最小限に抑えます。

エンティティ参照

チーム内でファイルとエディタが同じエンコーディングを使用している場合、エンティティ参照を使用する必要はありません。例：&mdash;， &rdquo;，&#x263a;ただし、HTML で特別な意味を持つ文字（< や & など）や、目に見えない文字（スペースなど）は除きます。

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.

type 属性

スタイルシートとスクリプトを参照する場合、CSS や JavaScript でない場合を除き、type 属性を指定しないでください。
HTML5 ではスタイルシートの type が text/css、スクリプトの type が text/javascript とデフォルトで指定されているためです。

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTML フォーマット規約

HTML の引用符

属性値には二重引用符を使用します。

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS スタイル規約

ID と Class の命名

意味のある id と class 名を使用します。

/* 不推荐: 含义不明确 */
#yee-1901 {}

/* 不推荐: 按直觉来的 */
.button-green {}
.clear {}
/* 推荐: 指定含义 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

ID と Class の命名スタイル

id と class はできるだけ簡潔で、かつ理解しやすいものにします。

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

セレクタ

必要な場合を除き、id や class の前に要素名を付けないでください。

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

プロパティの省略記法

CSS で省略記法を使用できるプロパティ（font など）をできるだけ使用すると、コーディング効率とコードの可読性が向上します。

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 と単位

値が 0 の場合、単位を追加しません。

margin: 0;
padding: 0;

先頭の 0

値が -1 と 1 の間の場合、先頭に 0 を付ける必要はありません。

font-size: .8em;

16進数表記

/* 不推荐 */
color: #EEBBCC;
/* 推荐 */
color: #ebc;

プレフィックス（接頭辞）

プレフィックス付きの名前空間を使用すると、命名の衝突を防ぎ、コードの保守性も向上します。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID と Class の命名の区切り文字

セレクタではハイフンを使用すると可読性が向上します。

/* 不推荐:  “demo” 和 “image” 之间没有分隔符 */
.demoimage {}

/* 不推荐: 使用下划线 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

CSS フォーマット規約

記述順序

CSS はプロパティのアルファベット順に記述すると読みやすく、保守しやすくなります。並べ替えの際はブラウザのプレフィックスが付いたプロパティは無視します。

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;
  }

}

宣言の終了

CSS の各行はセミコロンで終了します。

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

プロパティ名の末尾

プロパティ名と値の間にはスペースを1つ入れます。

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

宣言スタイルブロックの区切り

セレクタと {} の間はスペースで区切ります。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#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;
}

ルールの区切り

ルール間は空行で区切ります。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

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;
}

CSS メタ規則

セクションコメント

コメントを使用して CSS をセクションに分割します。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

原文：https://google.github.io/styleguide/htmlcssguide.xml