class
同じ見た目や役割を複数の要素で再利用するときに使います。
命名の基本
意味が伝わる名前を作るための基本
「赤い左の箱」ではなく「エラーメッセージ」「記事カードの続きを読むリンク」のように入力すると、変更に強い名前を提案できます。
ID
ページ内で1つだけの場所やアンカーに使います。繰り返す部品には向きません。
BEM
.card__title--largeのように、部品・要素・種類の関係を表します。
data属性
data-action="open-dialog"のように、JavaScriptの操作対象を表します。
候補
役割が分かる名前を先に表示
入力から「どの部品の、何をする要素か」を読み取り、具体的な名前から順に表示します。
0候補
説明を入力すると候補が表示されます。
命名の考え方
名前は見た目ではなく、役割を表す
CSSを読んだ人が、画面を見なくても用途を推測できる状態を目指します。
見た目ではなく用途を名前にする
.red-button（赤いボタン）ではなく、.delete-button（削除ボタン）のように「何をする要素か」を名前にします。色を変えても名前と役割が食い違いません。
所属する部品を示す
記事カード内のリンクなら.article-card__read-moreのように、どこに属するかを明確にします。
状態を分離する
.is-open、.is-selectedなどを使い、可能ならaria-expandedやhiddenも併用します。
単語はハイフンで区切る
CSSでは.article-cardと.article_cardのどちらも使えます。このツールは、単語の境目が読みやすく広く使われるkebab-case（ハイフン区切り）を初期値にしています。既存のルールがある場合は、その区切り方に統一してください。
| 避けたい名前 | 問題 | 代替候補 |
|---|---|---|
| .tyuuou | 日本語のローマ字読みで、第三者が意味を推測しにくい | .centered-content / .content-center |
| .kaijo | 解除・取消・初期化など、操作の意味が曖昧 | .cancel-button / .clear-button / .reset-button |
| .red-button | 配色変更で名前と見た目が一致しなくなる | .delete-button / .primary-action |
| .button1 | 連番では役割と差分が分からない | .search-submit / .dialog-close |
| #article-card | 一覧内で繰り返す要素にIDを使うと重複する | .article-card |
| .js-open | 装飾クラスと操作フックが混在しやすい | [data-action="open-dialog"] |
次に調べる
名前が決まったらHTMLとCSSを確認
使用する要素の意味はHTML辞典、指定できるプロパティと値はCSS辞典、動きの実例はCSSアニメーション図鑑から確認できます。