意識するだけでコードの質が上がる!?Google HTML/CSS Style Guideに見るコーデイングの重要性

html/cssスタイルガイド

汚いコードは嫌われる!?

Googleは Google HTML/CSS Style Guide という html と css のガイドラインを公開しています。これがかなり細かく設定されていて、実際見ていると納得するところが多く、かなり参考になります。

自分はサイトを見る時、ブラウザでソースを見るだけでなく、Chrome であれば要素の検証から html や css、その他のリソースなど覗ける所はほぼ全てを見まくります。その時に気づくのが

CSS で要素の重複が見られるサイトが多い

意図的に記述を上書きしている場合をを除いて、重複記述は修正する時に手間が増えたり、修正箇所を特定できなかったり、コード自体を見づらくしてしまいます。

また共同作業でコーディングする時など、それぞれが好き勝手なルールでコードを書いていると、重複箇所が盛りだくさんになり、メンテナンス性皆無のカオスコードとなってしまいます。特に CSS は扱いやすい言語なので設計を気にせず書いているとすぐにカオス化します。

ガイドラインは共通の認識を持つのに役立つ

後で振り返る際にストレスを感じなくするのに役立つのが、Google HTML/CSS Style Guide のような共通の認識でコーディングするためのガイドラインです。既にガイドラインを策定している場合でもかなり参考になるのではないでしょうか。

自分が実践していること

全て実践できれば良いですが、既に運用している場合などは実現が難しかったり、適さない箇所があると思います。また、このガイドラインが全て正しいこともありません。なので、このガイドラインを通して自分が意識し実践するようになったことに絞って紹介します。

ちなみに、新規案件の際には、カスタマイズしたコーディングガイドラインをお客様やチームで共有しています。ガイドラインをあらかじめ策定しておくと命名規則や書式に個人差が出る頻度が少なくなるので重宝しますよ。

インデントにはスペースを使おう

タブなのかスペースなのかを明確化しましょう。タブはエディタや個人の設定によってインデントの解釈が違う場合があります。なので、スペース何個分としておくと制作環境による誤差がなくなります。体感値ですが、スペース2個分としている人が多いような気がします。

TODOコメント

<!-- TODO: コメントを書く -->としているとTODOという言葉をエディタが認識して色をつけてくれる場合があります。色がついていなくても、TODOを検索すれば、すぐに作業を開始できますし、記述に詰まった時でも TODO を共有することで他の方から解決策をいただけるかもしれません。

CSS で設定することを HTML に書かない

関係の分離という項目に記載されています。html / css / javascript のそれぞれは異なる役割を担っているので干渉しないようにしよう、ということです。

例えば、HTML 内に CSS で記述できるスタイルを書くと!important の次に高い優先度となります。こうしたインライン記述は、JS で動きを制御することを考慮して、完全に分離させておく方がメンテナンス性が高まります。

この時、理解すべきは CSS が適用される優先順位です。(下図)

css priority

この優先度の理解を曖昧にしていると、JS で制御できないとか、CSS で指定した要素が反映されないといった事態を引き起こし、修正に余計な時間を費やすことになります。

ちなみに私の場合は、以下のようなルールで CSS を適用するようにしています。

  • !important

    最終手段。使用した場合は適用箇所がわかるようにする。

  • インライン記述

    JS でスタイルを操作する時、ページの表示速度改善のためにファーストビュー部分をインライン化する時にだけ使用

  • IDセレクタ

    JS で要素を特定する用に使う。積極的に使わない。

  • クラスセレクタ

    基本はクラスセレクタのみで記述する。

  • 要素セレクタ

    HTML の構造に依存するので必要以上に使用しない。

  • ユニバーサルセレクタ

    CSS の初期化時にだけ使用。

上記はあくまでも一例ですが、私の場合はほとんどクラスセレクタのみで CSS を書くので、優先順位によるスタイルの競合がほぼ起きません。

理解しやすい名前付け

クラス名やID名に特異な名前を付けないようにしてください。これは一体何を指しているのか理解できないクラス名やID名の場合は、その意味を理解するという無駄な時間を費やしてしまうことになります。

プロパティの記述はアルファベット順で

アルファベット順にするだけでかなり読みやすくなります。
最初に順序を気にせず記述した内容を見てください。

body {
  color: #333;
  line-height: 1.54;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
}

これをアルファベット順にします。

body {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.54;
}

アルファベット順の方が見やすいのではないでしょうか。順番に記載されていることで、プロパティを一覧しやすくなっているはずです。

人に優しいコードは自分にとっても優しい

自分しか見ないコードだから好きなように書こう。それでも良いと思います。ただ、誰が見てもわかりやすいコードは自分が後で読み返す時にもわかりやすいはずです。

ここで紹介したガイドラインが全てではないですが、作業環境だけの効率化ではなく、コーディングガイドラインのように作業を始める前の基礎の部分までを徹底できるかどうかが、よりよい仕事をするための差別化になるような気がしています。

関連記事