Google HTML/CSS Style Guide まとめ

[Google HTML/CSS Style Guide（2019年9月時点）](https://google.github.io/styleguide/htmlcssguide.html)
より意訳とまとめ。訳が間違っていたらごめんなさい。
## プロトコル
imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。

```html
<!-- 非推奨：プロトコルの省略 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 非推奨：httpの利用 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
```

```css
/* 非推奨：プロトコルの省略 */
@import '//fonts.googleapis.com/css?family=Open+Sans';
/* 非推奨：httpの利用 */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* 推奨 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
```

## インデント
インデントはスペース2つにする。Tabは使用しない。

```html
<ul>
  <li>Fantastic
  <li>Great
</ul>
```

```css
.example {
  color: blue;
}
```

## 大文字を使用しない
全てのコードは小文字で記述する

```html
<!-- 非推奨 -->
<A HREF="/">Home</A>

<!-- 推奨 -->
<img src="google.png" alt="Google">
```

```css
/* 非推奨 */
color: #E5E5E5;

/* 推奨 */
color: #e5e5e5;
```

## 行末の余分な空白を無くす

```html
<!-- 非推奨 -->
<p>What?_

<!-- 推奨 -->
<p>Yes please.
```

## 一般的なMetaルール

### エンコード
エンコードはUTF-8(no BOM)を使用する

```html
<meta charset="utf-8">
```

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

### TODO
TODOをコメントとして記述する。
@@のようなものは使用せず"TODO"キーワードだけを使う。

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

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

## HTMLスタイルルール
### ドキュメントタイプ
HTML5を使用する。
すべてのHTMLに`<!DOCTYPE html>`があるほうがよい。
void要素は /で閉じてはいけない。 `<br />` など

### HTMLバリデーション
可能な限り適切なHTMLを使用する。
[W3C HTML validator](http://validator.w3.org/nu/)などのツールを使用してテストする。

```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>
```

### 意味のあるHTMLを書く
目的に応じたHTMLを使用する。(見出しの為のh要素、段落の為のp要素、アンカーの為のa要素など)

```html
<!-- 非推奨 -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 推奨 -->
<a href="recommendations/">All recommendations</a>
```

### メディアの代替物
メディアについては、必ず他のアクセスを提供するようにする。

```html
<!-- 非推奨 -->
<img src="spreadsheet.png">

<!-- 推奨 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
```

### 関係の分離
HTML(構造)とCSS(見た目)とScript(振る舞い)は独立させて、3つの相互関係はなるべく最小限にする。

ドキュメントやテンプレートにはHTMLだけを含むようにし、HTMLには構造だけを表現するようにする。
見た目に関するあらゆる内容はCSSへ、振る舞いに関してはScriptへ記述する。

HTMLからCSSやScriptへのリンクはなるべく減らし（まとめて）、互いのファイル間の接触部分をなるべく少なくする。

メンテナンス面を考慮すれば、構造、見た目、振る舞いの分離は重要。CSSやScriptの更新よりも、HTMLドキュメントやテンプレートの修正コストのほうが常に大きい。

```html
<!-- 非推奨 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

<!-- 推奨 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!
```

### 実体参照
UTF-8において、`&mdash;, &rdquo;, or &#x263a;`などの実体参照を使用する必要はない。
例外としてHTMLで特別な意味を持つ"<"や"&"には使用する。

```html
<!-- 非推奨 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- 推奨 -->
The currency symbol for the Euro is “€”.
```

### タグを省略する(任意)
ファイルサイズや、可読性の為に、省略できるタグ(html,body,/p,/tdなど)を省略する。
省略できるタグの参考: [HTML5 specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission)

```html
<!-- 非推奨 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- 推奨 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
```

### Type属性
stylesheetとscriptのtype属性は省略する。
HTML5ではデフォルトで解釈されるため必要ない。

```html
<!-- 非推奨 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

<!-- 推奨 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
```

```html
<!-- 非推奨 -->
<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の書式ルール

### 全体的な書式
block, list, table要素は改行し、その子要素にはインデントを入れる。

```html
<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>
```

### 長い行を改行する(任意)
可読性が向上する場合には長い行を改行する。
改行する場合には、少なくとも元のインデントよりスペース4つ分を追加する。

```html
<md-progress-circular md-mode="indeterminate" class="md-accent"
    ng-show="ctrl.loading" md-diameter="35">
</md-progress-circular>

<md-progress-circular
    md-mode="indeterminate"
    class="md-accent"
    ng-show="ctrl.loading"
    md-diameter="35">
</md-progress-circular>

<md-progress-circular md-mode="indeterminate"
                      class="md-accent"
                      ng-show="ctrl.loading"
                      md-diameter="35">
</md-progress-circular>
```

### HTML引用符
属性値の引用符は、ダブルクオーテーション(")を使用する。

```html
<!-- 非推奨 -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- 推奨 -->
<a class="maia-button maia-button-secondary">Sign in</a>
```

## CSSスタイルルール

### CSSバリデーション
可能な限り、適切なCSSを書く。
[W3C CSS validator](http://jigsaw.w3.org/css-validator/)などのツールを使用してテストする。

### IDとClassのネーミング
理解しやすく、一般的なネーミングにする。

```css
/* 非推奨: 意味が無い */
#yee-1901 {}

/* 非推奨: 見た目を表す */
.button-green {}
.clear {}

/* 推奨: 具体的 */
#gallery {}
#login {}
.video {}

/* 推奨: 一般的 */
.aux {}
.alt {}
```

### ID名とクラス名のスタイル
ID名とクラス名は可能な限り短くすること。必要であれば長くなっても構わない。

```css
/* 非推奨 */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}
```

### タイプセレクタ
ID名とクラス名にタイプセレクタを使用するのは避ける。
[パフォーマンスの理由](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/)からも、不必要な子孫セレクタを使用するのは避ける。

```css
/* 非推奨 */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}
```

### ショートハンドプロパティ
可能な限りショートハンドプロパティを使用する。
CSSは様々な[ショートハンドプロバティ](http://www.w3.org/TR/CSS21/about.html#shorthand)を提供している。

```css
/* 非推奨 */
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の後の単位は省略する。

```css
flex: 0px; /* flex-basisには単位が必要です。 */
flex: 1 1 0px; /* IE11では単位が必要です。 */
margin: 0;
padding: 0;
```

### 小数点の値の始めの数字
始めの数字は省略する。

```css
font-size: .8em;
```

### HEX形式の色指定
可能であれば3文字の色コードを使用する。

```css
/* 非推奨 */
color: #eebbcc;

/* 推奨 */
color: #ebc;
```

### 接頭詞(任意)
大きなプロジェクトの場合にIDやclass名が重複しないよう、固有の接頭詞を付ける。

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

### ID名、class名の区切り文字
ID名とクラス名はハイフン(-)を使用して単語を区切る。

```css
/* 非推奨: “demo” と “image” の間にハイフンが入っていない。 */
.demoimage {}

/* 非推奨: アンダースコアは使用しない。ハイフンを使用する。 */
.error_status {}

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

### ハック
CSSを使用したユーザーエージェントの判定は避ける。違うアプローチを先に試す。


## CSS書式ルール

### プロパティを記述する順番
アルファベット順に記述する。(prefixは除外だが、-mozは-webkitの前に来るなどの順番は守る)

```html
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
```

### ブロック単位のインデント
階層がわかるようにブロック単位でインデントする。

```css
@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}
```

### 宣言の終止符
宣言の後ろに毎回セミコロン(;)を付ける。

```css
/* 非推奨 */
.test {
  display: block;
  height: 100px
}

/* 推奨 */
.test {
  display: block;
  height: 100px;
}
```

### プロパティ名の終止符
プロパティ名のコロン(:)の後ろにスペースを一つ入れる。

```css
/* 非推奨 */
h3 {
  font-weight:bold;
}
/* 推奨 */
h3 {
  font-weight: bold;
}
```

### ブロックと宣言の分離
セレクタ名の後ろにスペースを一つ入れる。

```css
/* 非推奨: スペースがない */
#video{
  margin-top: 1em;
}

/* 非推奨: 改行は必要ない */
#video
{
  margin-top: 1em;
}
/* 推奨 */
#video {
  margin-top: 1em;
}
```

### セレクタと宣言の分離
それぞれのセレクタと宣言を改行する。

```css
/* 非推奨 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推奨 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
```

### ルールの分離
ルールとルールの間は1行空ける。

```css
html {
  background: #fff;
}

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

### CSS引用符
属性セレクタやプロパティ値の引用符にはシングルクォーテーション(')を使用する。
URI値には引用符を使用しない。 
例外: @charsetを使用する必要がない場合は、[シングルクォーテーションは許可されない](http://www.w3.org/TR/CSS21/syndata.html#charset)為、ダブルクォーテーションを使用する。

```css
/* 非推奨 */
@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 {}
```

## 別れの言葉
**一貫性を持ってください。**

コードを編集する場合、数分かけてまわりのコードのスタイルを明らかにしましょう。
皆が計算式の前後にスペースを入れているのであれば、あなたもそうするべきです。
コメントの前後が#で囲われているなら、あなたもそうしましょう。

ガイドラインを持つポイントは、皆がコーディングに集中できるように共通の語彙持つことです。
ここでは、人々が知っている語彙でグローバルなスタイルを提示していますが、ローカルのスタイルのほうが重要です。 

あなたが追加したコードが、まわりと大きく違うコードだと、読む人のリズムが崩れるので、このようなこと避けましょう。