特にHPの作成では多くのファイルを取り扱うことが必要になります。ファイルやフォルダの名前をなんの法則性もなく決めてしまうと、参照する際に確認する手間がかなりかかってしまいます。そのため全体を通して命名規則を作っておくことをお勧めします。
これはファイルの名前だけではなく、html内でのクラス名などにも使用することができると思います。
一般的に必ず守られること
ファイル名は原則英数字で英語になります。ローマ字のものが混ざってしまうと整理しにくくなってしまうのでなるべく避けたいところです。
長すぎる名前については省略したものを採用することもありますが、なるべく一般的な名称を使用したいですね。
| 場所 | クラス名 |
| トップ画面の最上部の画像など | kv (key visual) |
| テーマ | theme |
| お知らせ | news |
| その他 | others |
基本的にはそのまま英訳したものを使用していますが、混同しやすい場合などは少し違う名前を採用するときもあります。
単語のつなげ方
名前をわかりやすくする際には必ず複数の単語をつなげる必要があります。その規則には派閥があるので簡単に説明しておきます。
– (ハイフン)
info-containerのような形で命名します。一番いろいろなところで見る気がします。スタンダードなだけあって特に問題なく使用することができます。
大文字にする
infoContainerのような形で命名します。ほかの記号が入らないということが大きなメリットですが、大文字を入れるのが少しめんどくさい、空間が生まれないので読みにくくなってしまうというデメリットがあると感じています。よくPythonなどで使われているところを目にします。
_ (アンダーバー)
info_containerのような形で命名します。スペースの代替という印象が強いので個人的には一番読みやすいと思っています。また、US配列を使用しおり、比較的入力しやすかったので最近はこれを採用していました。日本語配列のキーボードを使用する際には入力に難があることがデメリットかなと思います。
(スペース) (やってはいけない)
info container
やってはいけない。すべてのエラーの根源となる忌むべき存在
スペースは見えない文字になってしまうので使ってはいけません。気を付けてても大体半角と全角に殺されます。
その他注意すること
大きなグループの中に含まれている要素の場合には(グループ名)_(それ自体の名前)とすることもあります。必要に応じて使い分けられると可読性が上がるかな

コメント