Googleの HTML CSS コーディングガイドライン

google 推奨 コーディングガイドライン

忘備録としてメモメモ

こんにちは!YOUKNOWです。

インターネットを徘徊していたらこんなものを見つけました。

Google推薦 HTML CSS コーディングガイドライン

この記事はGoogleウェブマスター向け公式ブログの記事で紹介されている、Google HTML/CSS Style Guideに書いてあるコーディング方法と感想が書かれている記事

すべての内容はDATARAME HOMEPAGEさんでまとめてくださってますので、忘備録らしく自分が気になったものをピックアップして紹介していこうと思います。

HTMLの引用符

属性値を引用する場合、必要に応じて二重引用符を使用します。

javaScriptなどではシングルクォーテーションが良しとされてた気がしますが(どちらでも可)、HTML/CSSだとダブルクォーテーションのほうが良いのですね。

タイプセレクタ

タイプセレクタでIDとクラス名を修飾することは避けたほうが良いそうです。
推奨された方法で書くことで、パフォーマンスも向上するそうです。

たまに他の人のコードを見たときについてるときがあります。
CSSの優先度にもかかわってきているのでしょうか。

プロパティは一括して指定する

可能な限りプロパティは一括して指定することが望ましいようです。

これpaddingは修飾できることをしっていたのですが、fontとしてここまでガッツリ一括して指定できるとは知りませんでした。
ふえー..こんなにできるんですねぇ..。

CSSの宣言順序

宣言する順番をアルファベット順に
ベンダープレフィックスなどに関してはまとめて記述したほうが良いようです。

これも知らなかった…。なんとなくwidthやheightとかpositionとか位置や大きさ系を上に書いていました。

プロパティ名の終わりにスペース

プロパティの終わりを表す ; のあとにスペースを使う。

このスペースがあることで、cssファイルが肥大化すると思っていて避けていました。
逆にスペースを入れたほうが良いのですね。

ただ最近だと納品するときにコードを圧縮かけることが多いので、ここらへんの記述のスペースとかに関してはあまり気にしなくても良いのかなぁなんて思ったり思わなかったり。

最後に

だいたいのことはできていましたが、逆に全く知らないものもありました。

Googleは検索の王様なので、Googleが推奨するガイドラインに添えるところは添って、あとは社内のガイドラインとかと照らし合わせていくことが大事ですね。