html,cssを記述いていてclass名、id名は何かしら意図や統一性がないと可読性が低くクオリティが低いものになってしまいます。そこでよく使われるものを簡単にまとめてみました。参考になれば幸いです。
ケバブケース
例 box-area
単語と単語の間をハイフンで繋ぐ
スネークケース
例 box_area
単語と単語の間をアンダーバーで繋ぐ
パスカルケース
例 BoxArea
単語の先頭を大文字にする
キャメルケース
例 boxArea
2つ目の単語の先頭を大文字にする
まだまだ他にもありますがhtml.cssでは主にあるのはこの4つかと思います。
体感ではケバブケースとスネークケースが多くそれにキャメルケースが合わせてあるイメージです。
こちらの各ケースに
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
こちらのを合わせると意味的にもわかりやすくいいと思います。