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でレイアウトの位置替えは楽勝なので）
それでは。