今まで自分一人で作業する事が多く、htmlの子要素にclass名を付ける時に「box」「block」「child」といった感じで書いていたんですが、自分で見直しても何処の事なのか分かりにくい！
今後、他の人と作業したり修正・変更があった時に自分以外の人が見ても分かりやすいコードの書き方はないかな？と思い調べてみたところ何種類かの「命名規則」というのがあったので記事として残しておこうと思いました。

命名記法

読みやすいコードを書くための基本で「命名記法」という方法があるようです。
その中でも、よく使われているという５つの書き方の紹介です。

・キャメルケース

単語の最初の文字は小文字、２つ目以降の単語の１文字めは大文字にする書き方
別名「ローワーキャメルケース」JavaScriptやPHPでよく使われる。

camelCase

・パスカルケース

全ての単語の１文字目を大文字にする書き方
別名「アッパーキャメルケース」

PascalCase

・スネークケース

全て小文字で単語の間をアンダースコア（ _ ）で繋げる書き方
Pythonの関数名や変数名に使われる事が多い

CSS命名規則の「PRE_CSS」などを使う場合はスネークケースではなくキャメルケースを使用する

snake_case

・コンスタントケース

全て大文字で単語の間をアンダースコア（ _ ）で繋げる書き方
別名「アッパースネークケース」
定数名に使用される事が多く、C言語、Python、JavaScriptなど幅広く使用されている。

UPPER_SNAKE_CASE

・チェインケース

全て小文字で単語の間をハイフン（ – ）で繋げる書き方
別名「ケバブケース」
プログラミング言語では「 – 」は演算子として使うので、ファイル名やHTMLのclass、idでしか使わない。

CSS命名規則の「REMM」などを使う場合はチェインケースではなく他の書き方をしないと分からなくなる。

kebab-case

目的を示す名前にする

class名を「結果」を示す名前にするのはNG！
変更があった場合に内容と違う名前になってしまうので結果を名前にするのはやめておきましょう！
例、class名=”red”;としてcssで赤にしていると、変更があり他の色になった時にclass名と違うのでおかしくなるし、class名の変更をしようとすると、全てのstyleを付けている部分を書き直さないといけない。

上の例の場合なら「目的」名としてclass=”color”などにしていれば、変更があっても問題ありません。

状態を表す名前にする

open、close、hide、などどういった状態なのかを付けておくと分かりやすいです。

JavaScriptなどでclass付与する場合などに使うと分かりやすい