WEB業界に入ってhtml / cssを学習し始めた頃、
えっclass名って、どんな名前を付けたらいいの？
っていう問題が自分の中でありました。

当時の僕はこう思っていました。

###「どんなclass名をつけたら正解なんかが分からん」

周りに聞いても結局、
👪「とりあえずこういう名前にしとこか」
👨‍👨‍👧「後で見た時に分かりやすい名前をつけるんよ」
とか言いながら、さらっと名前をつけてしまう。

で、こう思ったわけですよ。
👳‍♂️「えっなんでその名前にしたん？」
この疑問に嫌味な意味はなく、本当に単純に理由が知りたい。

経験者はわかってるんですね。
cssの設計がもうすでに頭にあるわけやから命名ルールに沿ってつけていくだけ。
でも、初心者からすると「なぜそうなのか」が分からない。

あとあとわかったけど、結構なんとなくの名前でつけてます。
単純に囲いたいだけなら「wrap」とか「area」
カード型みたいな表示にしたいなら「card」とかそんな感じ。

なので僕のclass名のつけかたを少しだけ書いておきます。
※あっ独自ルールのやつです。

ちなみにアンスコ２つにしているのはBEMっぽさと
class名の見やすさと外部apiのcssとの差別化を図るためです。
（大体はアンスコ１つじゃないかな。）

大枠、レイアウト

・〇〇__area
・〇〇__box
・〇〇__card
・〇〇__contents

要素を囲いたいときは、親要素に__wrapを

・〇〇__area__wrap
・〇〇__box__wrap

ヘッダー/フッター部分

・〇〇__header
・〇〇__footer

内容の中のヘッダーやフッターは

・〇〇__content__top
・〇〇__content__bottom

header の入れ子の要素は、

・〇〇__title -> title 内の要素は p とか span とかで囲ってもいい
・〇〇__side -> side 内の要素は header__side__item（itemを使う）
※切り分けるために item にもう一つclass名をつける場合は、type__〇〇みたいな感じ。
※item じゃなくてボタンとかの場合も type__submit type__cancel とかで切り分ける。
※他には mode__〇〇とかよく使います。

内容部分

・〇〇__body
・〇〇__content
※内包する要素のclass名としては、〇〇__areaとか、〇〇__box、〇〇__card、
とか形状によってそれぞれ名前を変更したりします。

大まかなレイアウト時はこんな感じです。

「〇〇__の部分ってなんて名前にすればいいの？」

例えばサイトTOPページなら site-top
サイトの概要のページだと site-info みたいな。
あとは site__title とか info__title、site-info__title にしてもいい

とりあえずは自分なりのルールを作って、統一性を持たせたclass名を心がける。
慣れてきたらBEMとかの玄人さんたちが考え出した、命名規則を勉強するといいかも。

「あっ最後にこれだけは！」

シンプルな単語のみのclass名は絶対やめたほうがいい。
後でcssを作り込んでいる時に、予期せぬスタイルが反映されて大変なことになる。
content とか、text とか、
あとは left とか right とか、場所が固定されるものは極力使用しないように。
（cssでレイアウトの位置替えは楽勝なので）

それでは。