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をコピーしました