cssコメントアウトの一番使いやすい(と思ってる)書き方

CSSコメントの分かりやすい書き方

他人の書いたcssに限らず、昔自分の書いたcssを解読する時に助かるのがコメントアウトの存在。

そのコメントの記述方法は千差万別、色んな書き方があります。

しかし、その中でも分かりやすいコメントと分かりにくいコメントってありますよね。

今回は、私の今までの経験から一番分かりやすい(と勝手に思っている)cssのコメントアウトの記述方法を書いてみたいと思います。

cssコメントの書き方

まずは、通常のcssのコメントアウトを載せておきます。

私も知らずに使っていましたが、コメントアウトの「/*」「*/」とコメント部分の間には、半角スペースが必ずいるので忘れないようにしないとですね!

分かりやすいcssとはなんなのか

私の考える分かりやすいcssとは、こんな感じです。

  • 全体の構成がそれとなく分かる
  • 親子関係、相関関係が分かりやすい
  • 何故その記述があるのかが分かりやすい

これさえ守れば、初見の人でも大分見やすいcssのコードになるのではと思います。

ここからは、どのようにそれを実践するかを書きたいと思います。

かんたんな目次をつける

cssがどのような構成なのかを簡単に説明します。

例えばこのような形。

本当にざっくり全体を知る事ができればいいことと、何かの修正時に「目次まで編集する必要がないように」、大きめのくくりを書くだけで良いかと思います。

親子関係、相関関係を分かりやすくする

長いcssの場合、ありがちなのが「自分が今どこを見ているのかが分からなくなる」というシーン。

そういった場合に、スタイルの親子関係等が分かると、自分がどの部分を見ているかが把握しやすくなります。

私は、パンくずのようなものをコメントにつけて、親子関係を分かりやすく表現しています。

例えばこういった形。

コメント自体も付けすぎるとうっとうしくなってくるので、「把握するのに最低限のものを記載する」ということを、私は自分ルールとしてもっています。

イレギュラーなスタイルには逐一コメントをつける

他人のソースを見ると、イレギュラーな記述が必ず1つはありますよね。

自分でコーディングする時に「ここだけルールに乗っ取ってないなぁ」と思いながらコーディングを進める人もいるのではないでしょうか。(私は経験あり)

そういった場合は、逐一コメントを付けるようにします。

例えば下記のような形。

しかし、このコメントは補足的な意味合いなので、端的なものをこころがけるとよいと思います。

全てのコメントアウトを合わせると…

先に述べたコメントアウトを一つにまとめるとこのような形となります。

「全体の構成がそれとなく分かり」「親子関係、相関関係も分かりやすく」「何故その記述がそこにあるのかも理解できるようになっている」かと思います。

大企業なんかで陥りやすいケースが、cssへの修正が重なりすぎて、もはや「社内の一部の人間しかスタイルを読めない」といったパターン。

しかし、今回ご紹介したうちのどれか一つでも反映して頂ければ、比較的分かりやすいcssになるかと思います。

cssのコメントで迷っておられる方に、何か参考になれば幸いです。

※追記
htmlコメントの書き方についても、記事にしてみました!