ネーミングはすべての開発者に与える最初の試練だと思います.
CSSの名前がどのような基準でおいしいものになるか見てみましょう

開発者はなぜ良い名前をつけるのですか?

Web開発者を学ぶ前に、ゲームクライアントを学び、当時も変数や関数名を書くのに苦労していました
だから自分の名前をつける理由は次の通りです.
1.混同防止
ことわざ🐶餅のように作られていて、使い勝手が悪い.
変数名をnumとすると、これが何匹、何匹、何秒、何匹の当事者を作るのかすら分からない.
2.可読性の向上
私が作ったコードを他の人に見られるのはよくあることです.
ただし、関数名をfunc 1、func 2、func 3とすると、これらの関数の機能を理解するためには、他の人は直接関数本文を参照する必要があります.
しかし、addNumbers、subNumbers、divNumbersをつけたら?
「あ、数字を演算する関数だったんですね~」と納得です
CSSもそうです!
CSSで命名された理由も私の気持ちとあまり変わらない.
選択者に良い名前を付けて、名前で選択者の名前、どこで使うか、何をするか、他の要素との関係などを知ることができます.

BEM命名規則の使用

B(Block)

デフォルトページコンポーネントを表します-の使用

.main-box { }

E(Element)

コンポーネントを表すコンポーネント__の使用

.main-box__candy { }

M(Modifier)

修飾語は修正事項を表す
基本的にコンポーネントや要素の形状、色、状態などを表す--の使用

.main-box__candy--big { }

js-使用

jsファイルのみでの変更を防止するためにjs-を貼り付ける.

const likeButton = document.querySelector('js-like-button');

relプロパティも使用できます

const likeButton = document.querySelector("[rel='js-like-button']");

終了~