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


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

インデント

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

  • リスト1
  • リスト2

id名・class名の命名ルール

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

/*-- NG --*/
#navigation {}
.atr {}
/*-- OK --*/
#nav {}
.author {}

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

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

/*-- NG --*/
ul#nav {}
p.txt {}
/*-- OK --*/
#nav {}
.txt {}

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

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

/*-- NG --*/
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
/*-- OK --*/
padding: 0;

数値が 0 の場合

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

/*-- NG --*/
padding: 0px;
/*-- OK --*/
padding: 0;

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

先頭の 0 は省略する。

/*-- NG --*/
opacity: 0.5;
/*-- OK --*/
opacity: .5;

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

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

/*-- NG --*/
#main_wrap01{};
/*-- OK --*/
#main-wrap01{};

css プロパティの記述順

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

/*-- NG --*/
width: 100px;
border: 1px solid #666;
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
/*-- OK --*/
border: 1px solid #666;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
width: 100px;

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

参考にしたサイト

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

タイトルとURLをコピーしました