Googleにやさしいマークアップの技法について、要チェックなものをまとめてみた。

calendar

reload

マークアップをする時、何を基準にしてマークアップすればよいか悩んだことはありませんか?(id名・class名など)
ディレクターや、クライアントに説明が必要になった場合「なんとなく、、、」では理由にならなく、困ってしまうこともあるのではないでしょうか。
そんな時は、「Google先生が、こうおっしゃっていたので!」と言えればだれも文句は言えないでしょう!
以下、Google先生がおっしゃっているマークアップ推奨方法があったので、要チェックなものをご紹介したいと思います。

インデント

インデントは、半角スペース2とする。
タブを使ったり、タブとスペースの混在はアウト。

id名・class名の命名ルール

意味の分かり、且つできるだけ短い名前にする。

タイプセレクタの記述について

id・class名にタイプセレクタは記述しない。

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

できる範囲内でかまわないから、ショートハンドプロパティで書く。

数値が 0 の場合

数値が 0 の場合、単位は省略する。

値が 1 未満の場合(0.xxなど)

先頭の 0 は省略する。

ID名・class名の単語のつなぎ

各単語のつなぎはハイフンで行う。

css プロパティの記述順

アルファベット順に記述する。
ベンダープリフィックスは無視するが、ベンダープリフィックス内のアルファベット順はルールに準ずる事。

以上です。

結構目からウロコなことが多かったです。
でも、「id名・class名の単語のつなぎはハイフン」は、ちょっとどうしようか迷いますね。
ハイフンでつなぐと、Sublime Text マークアップをする時、ダブルクリックでクラス名を選択できないのですね。。。結構な感じで作業効率が落ちるので、、、。
あとは、上記の通りやっておいた方が良いかもです。

参考にしたサイト

「Google HTML/CSS Style Guide」を適当に和訳してみた