htmlで、classにつける名前のルール

質問者さんが組織に属していて、組織の仕事として html, css を書いているなら、その組織のコーディングルールがあるのでは？　あれば、それに従うべきだし、無ければ組織内で話し合ってルールを決めてそれに従うということになるはずです。

組織に属していなくて、保守も含めで自分一人でやっているなら、質問者さんの好みで決めればいいことです。

ローマ字で書く方がいいですか？

ケースバイケース。
ルールがあるならそれに従うだけですし、ないなら好きなようにつければ良いと思います。

言い方が悪くなりますけど、個人的にローマ字で書かれてると「頭が悪いな」と思ってしまいます（特例は除きます）。

もし　そういったことを気にされてる or コーディングルールに興味がある　のでしたらGoogle HTML/CSS Style Guideなどを読んでみて下さい。
良く出てくる英単語はそれほどややこしいことは無いので、覚えられるうちに覚えておくべきです。

究極一人でやるのであれば CSS.escape() かけておけばセレクタには使えるので半角スペースを入れない限りはなんでもいいのでは？

例えばクラス名に .🐱 ってしたのであればセレクタでは `.${CSS.escape('.🐱')}` つまり .\\. 🐱 で選択できるので