classの命名規則について

テーマ、知りたいこと

next (react), nuxt (vue) など用いているとそこまでclassの命名に気を使わなくなったなと思い、class名でみなさんが気をつけていることや、皆さんのチームでの決まり頃があれば勉強のために知りたいなと思いました！

背景、状況

以前はBEMを用いており、久々に社内でBEMというワードを聞いて、社外のclassの命名規則事情を知りたくなりました！
BEMのような大きな概念でなくても大丈夫です！
例えば、よく使う英単語（container, wrapper, etc）などでも嬉しいです！
ご気軽に意見いただけると嬉しいです！

回答2件

Lhankor_Mhy

総合スコア37437

投稿2025/05/14 00:54

　tt-lv100さんの問いの意図からずれてしまうかもしれませんが、バニラなCSSの話をさせてください。

　@layer の登場で、BEMの目的のうち、詳細度のコントロールの必要性がかなり減ったと感じています。

　:whereで詳細度コントロールをすればなおのこと、という感じです。

　@scope が実装されれば、クラス名かぶりもコンポーネント内だけを注意すればよく、適切なコンポーネント切り分けをすればreactなどとほとんど同じ感覚で使うこともできる感じです。クラス命名どころか、雑にタイプセレクタで書いても問題が起きにくいです。たとえば：

html
1<div class="c_root">
2    <style>
3        @scope to (.c_root) {
4            .inner {
5                background-color: gold;
6
7                img {
8                    border: 5px solid black;
9                }
10            }
11        }
12    </style>
13
14    <div class="inner">
15        <img src="http://placehold.jp/150x150.png?text=article-body" alt="">
16        <p>
17            article-body
18        </p>
19
20        <div class="c_root">
21            <style>
22                @scope to (.c_root) {
23                    :scope {
24                        background-color: gray;
25
26                        p {
27                            color: white;
28                        }
29                    }
30            </style>
31
32            <img src="http://placehold.jp/150x150.png?text=user" alt="">
33            <p>
34                user
35            </p>
36        </div>
37
38    </div>
39</div>