Google が推奨する HTML/CSS のスタイルガイドについて

マークアップ

2017.03.17(Fri)

こんにちは。ディレクターの渡邊です。

マークアップエンジニアの方はご存知かとは思いますが、Googleが推奨している、HTML/CSSのスタイルガイドというものがあります。

全文ではないですが、その一部を抜粋し、決して高くない自分の英語力と様々な翻訳サイトを活用して和訳&意訳してみました。
コーディング初心者の方は参考になるかもしれません。
ちゃんと知りたいという方は、本家サイトをご確認くださいね!

Google HTML/CSS Style Guide

スタイルの基本ルール

HTTPSプロトコル

可能な限り、埋め込みリソースにはHTTPSプロトコルを使用する。
それぞれのファイルがHTTPS上で利用不可の場合を除き、画像やその他メディアファイル、スタイルシート、およびスクリプトには常にHTTPSプロトコル(https://)を使用する。

  <!-- 非推奨:プロトコルを省略 -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <!-- 非推奨:HTTPプロトコルを使用 -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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

書式の基本ルール

インデント

インデントはスペース2つとし、タブを使用したり、タブとスペースを混在させたりしない。

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

.example {
  color: blue;
}

大文字・小文字の使用

小文字のみを使用するようにする。
HTML要素名、属性、属性値(text/CDATAを除く)、CSSセレクタ、プロパティ、およびプロパティ値(文字列を除く)は小文字を使用する。

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

<!-- 推奨 -->
<img src="google.png" alt="Google">
/* 非推奨 */
color: #E5E5E5;

/* 推奨 */
color: #e5e5e5;

HTMLスタイルルール

ドキュメントタイプ

HTML5を使用する。HTML5(HTML構文)は、すべてのHTML文書で優先される。

タイプ属性

スタイルシートとスクリプトのtype属性は省略する。CSSとJavaScriptには型属性を使用しない。
HTML5はデフォルトで text/css と text/javascript を意味するため、type属性を指定する必要はない。

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

一般的な書式

すべての要素は新しい行に配置する。また、要素の子要素であればインデントする。
(リスト項目間の空白の問題が発生した場合は、すべてのli要素を1行に入れても問題ない。)

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
</table>

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・クラス名を付けるのは避ける。できるだけ、id や class と組み合わせて要素名を使用しない。

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

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

ショートハンドプロパティ

できるだけショートハンドプロパティを使用し、コードを分かりやすくする。

/* 非推奨 */
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;

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

まとめ

ルールを持たないまま、コーディングをしてしまうと一貫性の無いコードになったり、クオリティーに差が出たりと、良いことはありません。
また、Googleが推奨しているものですので、ディレクターやクライアントに何か聞かれても「Google が推奨していますから!」で誰しもが納得するのではないのでしょうか(笑)。
Google のルールが絶対というわけではありませんが、こちらをベースに自分なりのルールを作ってみてもいいかもしれませんね!