コメント機能を活用して編集箇所を検索する
CSSを編集していると、「あの項目はどこで設定したっけ？」とか「あのページのCSSはどのあたりに書いたかな？」と迷子になる事があります。
全てのページ、全てのパーツを同じ日に作り上げる事ができれば覚えていられるのかもしれませんが、現実ではなかなかそうもいきません。
進捗度合によっては何日にも渡る事もありますし、もしかすると途中で作業が止まってしまい、数週間空けてから再開・・・なんてこともありますよね。
そうしたとき、後からCSSをズラッと見て、どこに何を書いたのか？何行目に書いたのか？と探すのに手間がかかる事もあります。
素早く見つけ出す為に、私はコメント機能を活用していますよ！
CSSのコメントは「/**/」で書き込みます。
このコメントを「/*contact::::::::::*/」の様にして、その下に関連するCSSを書いていきます。
すると後から「contactの項目はどこかな？」と思った時に、エディタの持つ検索機能を開いて、「*contact」と入れて検索・・・これで目的の箇所へすぐに移動する事ができます。
また、CSSで指定する項目のカテゴリ分けにもなるので、後から編集する時にも見つけやすくなるので大変便利です。
開発者ツールを活用して行検索する事も有効
FirefoxやGoogle Chrome、Edge、Internet ExprorerなどのWebブラウザに入っている開発者ツール（デベロッパー・ツール）
これを使って、作業したい項目のCSS名を見て検索をかける事ももちろん有効ですが、右端の付近にファイル名と行数が出ているので、そこを見て行検索をするのも便利です。
CSS名は場合によっては長くなりますし、id,hogeのclass,hogeraの・・・と細かく指定している時は指定が面倒です。
項目をドラッグ操作で選択してコピーする事もできますが、あの項目を選択している途中で中途半端にしか選択できなかったりと、操作が難しい・・・
なので私は行数を見て、検索をかけるようにしています。
体感ではありますが、より早く目的の箇所を見つけ出す事ができるようになりました。
HTMLと比べると探しにくいCSSファイル
HTMLはブラウザ上の配置から、どのあたりに編集したい項目があるかがわかりますが、CSSはそうではありません。
どの位置に書いても、読み込みさえすれば適応されてしまうので、ブラウザから見て、フッター付近にあるからソースの下あたりだろう・・・と探しに行くことはできませんよね。
さらにWebサイト全体のレイアウト指定を行う物なので、行数も膨大になります。
そんな時に迷子にならないよう、コメント機能を活用して検索しやすくしておく事で、作業スピードも変わってくるかと思いますので是非参考にしてみてください。
