Google HTML/CSS Style Guide の推奨ガイドラインまとめ

Google HTML/CSS Style Guide の推奨ガイドラインまとめ

すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。

巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。

全般的なスタイルルール

プロトコルの記述

<!-- NG -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

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

一般的な書式ルール

インデント

半スペ2つ分でのインデントを推奨
タブを使うのは原則NG。タブとスペースの混在もNG

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

大文字/小文字

小文字のみ使用する。alt属性など値が文字列の場合は除く。

<!-- NG -->
<A HREF="/">Home</A>

<!-- OK -->
<img src="google.png" alt="Google">

全般的なメタルール

エンコード

エンコードは、UTF-8（BOM無し）を使う。
以下をHTMLファイルに記述してエンコードを指定。

<meta charset="utf-8">

HTMLのスタイルルール

ドキュメントタイプ

HTML5を使う。以下で始まる形式で書く。XHTML5（HTML5とXHTMLの混在）はNGみたい。

<!DOCTYPE html>

HTMLのバリデート

可能な限り適切なHTMLを記述すること。
そうでないとパフォーマンスが低下するような場合でない限りは、ちゃんと書く。
「W3C HTML validator」などの検証ツールを使用する。

<!-- NG -->
<title>Test</title>
<article>This is only a test.

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

マルチメディアの代替コンテンツ

マルチメディアの要素には、代替コンテンツを提供する。 画像には、意味のある代替テキストをalt属性として、動画・オーディオコンテンツにはキャプションを記述する。 装飾的な用途の場合など意味を持たない画像については、代替テキストは記述せずにalt=""とする。

<!-- NG -->
<img src="spreadsheet.png">

<!-- OK -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

実体参照

不要な実体参照は使用しないこと。
UTF-8においては、--（—）・"（”）・☺（☺）のような文字は実体参照を使う必要はない。
HTMLで特別な意味を持つ文字（ < や & など）は例外。

<!-- NG -->
The currency symbol for the Euro is “&eur;”.

<!-- OK -->
The currency symbol for the Euro is "€".

タグの省略（オプション）

省略できるタグは省略すること。（オプション）
ファイルサイズの最適化などのためにも省略できるタグは省略する。詳しくはHTML5 specificationを参照。
ただしタグを省略しないことがすでに認知されすぎているのでオプション扱い。

<!-- NG -->
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

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

type属性

<!-- NG -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

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

<!-- NG -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

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

HTMLの書式ルール

全般的な書式

ブロック要素・リスト要素・テーブル要素は改行してから記述し、それらの子要素にはインデントを入れる。
横並びリストなど改行による空白が問題になる場合は、li要素をすべて一行で書いてもOK。

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

CSSスタイルルール

IDとクラスの命名

IDとクラス名にはちゃんと意味の分かる名前を使うこと。
見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前を付ける。

/* NG: 意味が分からん */
#yee-1901 {}

/* NG: 見た目を表してる */
.button-green {}
.clear {}

/* OK: 役割を表してる */
#gallery {}
#login {}
.video {}

/* OK: 汎用的な名前 */
.aux {}
.alt {}

IDとクラスの命名スタイル

意味の分かる範囲でできるだけ短いIDとクラス名を使う。
短くしすぎて意味がわからなくなるようなのはNG。

/* NG */
#navigation {}
.atr {}

/* OK */
#nav {}
.author {}

タイプセレクタの記述

IDとクラス名にタイプセレクタは記述しない。
パフォーマンスを考慮して不要な子孫セレクタも避ける。

/* NG */
ul#example {}
div.error {}

/* OK */
#example {}
.error {}

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

可能な限りショートハンドでプロパティを書く。

/* NG */
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;

/* OK */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

「0」と単位

値が「0」なら単位を省略する。

margin: 0;
padding: 0;

小数点の頭の「0」

小数点の頭の「0」は省略する。

font-size: .8em;

URI値の引用符

url()での指定において、""（ダブルコーテーション）や"（シングルコーテーション）などのURI値の引用符を省略すること。

@import url(//www.google.com/css/go.css);

HEX形式のカラーコード

/* NG */
color: #ffffff;

/* OK */
color: #fff;

IDやクラス名の区切り文字

IDやクラス名の別々の単語はハイフンで繋ぐ。

/* NG: [demo]と[image]が繋がってる */
.demoimage {}

/* NG: アンダーバーで繋がってる */
.error_status {}

/* OK */
#video-id {}
.ads-sample {}

CSS書式ルール

プロパティの記述順序

アルファベットの順に記述する。
ベンダープレフィックスは無視する。ただし、例えば-moz接頭辞は-webkitの前に来る、などの順序は保つこと。

border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;

ブロック単位のインデント

その階層がわかるようにブロック単位でコードをインデントする。

@media screen, projection {
  html {
    background: #fff;
    color: #444;
  }
}

プロパティ名の終端

すべてのプロパティ名の終端にはコロンの後にスペースを入れること。

/* NG */
h3 {
  font-weight:bold;
}

/* OK */
h3 {
  font-weight: bold;
}

セレクタとプロパティの分離

別々のセレクタとプロパティは改行して書くこと。

/* NG */
a:focus, a:active {
  position: relative; top: 1px;
}

/* OK */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

CSSルールの分離

別々のCSSルールは改行して一行間を空けて書く。

html {
  background: #fff;
}

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

IDやクラス名の区切り文字は単語毎にハイフンで繋ぐ･･･
文脈的には仰る通りなんでしょうがね･･･私はもっぱらアンダーバー派でした。

理由は多分みなさんも同じかと思うのですが、 Dreamweaver でセレクタをダイレクトに選択できないから･･･。
設定変えれば直るんかしら・・・。今度調べてみます。

※2012/06/14追記
コードプレビューが正常に表示されておらず、ご迷惑をお掛けいたしました。
改めて修正いたしました。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ