HTMLのクラスの付け方には、様々な規則があります。
今回は、キャメルケース・スネークケース、ケバブケースについて書いていきます。

なぜ規則を設けるのか

規則性を持たせる事によって管理をしやすくする事ができます。
綺麗で統一感のあるコードを書く事によって、誰が見てもある程度予測のしやすいものが構築していく事ができます。

キャメルケース

アルファベットで複合語やフレーズを表記する際、各単語や要素語の先頭の文字を大文字で表記する手法の事を指します。
ラクダのコブから来ているようです。

例）
hogeHoge
listName
postName

キャメルケースの中でも分類する事ができ、「アッパーキャメルケース・ローワーキャメルケース」に分けられます。

-アッパーキャメルケース
PostName

-ローワーキャメルケース
postName

HTMLのクラスよりは、JSの変数・定数で使われるイメージが強いです。

スネークケース

単語と単語をアンダーバー(_)で繋ぐ記述方法です。
名前の通り、蛇が這う様子から来ているようです。

例）
hoge_hoge
list_name
post_name

BEMでよく使われるような形式ですね

block__element--modifier

ケバブケース

単語をハイフン(-)で繋ぐ記述方法です。
名前通り、ケバブの串で繋いでいる様子から来ていると言われています。

例)
hoge-hoge
list-name
post-name

クラス名としては、比較的に取り入れやすいものがケバブケースかなと思っています。