コーディング時のclass名の省略はどこまでして良いのか？「img / btn / ttl / desc / thumb」
自分のコードを見返したり、人のコードを見るときにclassが省略されてあったりするのと、「あ、ここは省略するけどこれは省略しないんだ」など気づきがありました。
その上で「そもそも省略するのってどうなの？」と思ったので、コーディング時のclass省略について考えてみます。
よくある省略例
よく見る省略は下記の通りです。
| 省略例 | 元の単語 | 意味 |
|---|---|---|
| img | image | 画像 |
| btn | button | ボタン |
| ttl | title | タイトル |
| desc | description | 説明文 |
| thumb | thumbnail | サムネイル（アイキャッチ画像） |
| mv | main visual | メインビジュアル |
| fv | first view | ファーストビュー（メインビジュアルと同じ意味） |
| sec | section | セクション（秒のsecondの場合もある） |
| icn | icon | アイコン |
| head | header | ヘッダー（<header>タグ使用時） |
| foot | footer | フッター（<footer>タグ使用時） |
| wrap | wrapper | ラッパー、コンテンツを包む領域 |
| cont | content | コンテンツエリア |
| lg | large | ボタンのサイズなどに使われる |
| md | medium | ボタンのサイズなどに使われる |
| sm | small | ボタンのサイズなどに使われる |
自分の感覚だとwrapはよく使います（むしろwrapperというclass名にしたことの方が少ない）が、headに関しては<head>タグがあるせいなのかheaderの方がいいんじゃないかと思います。
そしてttlでタイトルはやり過ぎなんじゃないかと思う反面、同じように母音を抜いているicnは使っていたり、単語によって自分の中でイメージが固まっていたりマイルールが確立してしまっています。
省略する理由と解決方法
入力する文字数が少なくて済む
まず、文字数が短ければ入力する文字数が少なくて済みます。
「description」と入力していては結構な文字数になりますし、入力している間にスペルミスの可能性も出てきますが、「desc」であれば4文字で済みます。
ちなみに、スペルミスに関しては自分の場合は「でぃすくりぷしょん」で変換して「description」にします。
変換を使ってしまった方がミスも起きにくいので、長い英単語は変換してしまうことで解決できます。
中身の要素のclass名も長くなってしまう
class名に「header」を使う場合、その中には「header_wrapper」が生まれてしまうなど、あとに続くclass名も長くなってしまいがちです。
このレベルだと省略したところで「head_wrap」ですが、これが続くとどんどん長くなってしまいます。
解決方法としては、BEMでいうところのBlockを少し区切るようにすると改善されます。
方針として区切りたくない場合は、そもそもそれはclass名が長くなる書き方なので、省略して微妙に文字数を少なくするメリットよりも、省略する場所してしていない場所が発生して統一されていないデメリットの方が大きく感じてしまいます。
classを複数組み合わせる場合に見にくくなる
classを複数組み合わせて使う場合、主観的ですが省略をしていない場合はかなり見にくく感じます。
<a class="button button-primary button-rounded button-large">テキスト</a>省略した方がなにが適用されているのか見てパッと分かります。
<a class="btn btn-primary btn-rounded btn-lg">テキスト</a>ただ、そんなに瞬時に判断できる必要があるのかと言われるとそうでもなく…
ちなみに状態変化には.is-を付ける方法もあります。
<a class="button is-primary is-rounded is-large">テキスト</a>個人的にはこれがしっくりきます。
方針
最低限の省略単語だけ決めておく
「btn」や「img」、あとはサイズを指定する「lg」「md」「sm」は使う。
それ以外は省略しないように決めておく方法です。
ただ、あくまでマイルールになってしまい、冒頭の『自分のコードを見返したり、人のコードを見るときにclassが省略されてあったりするのと、「あ、ここは省略するけどこれは省略しないんだ」』状態に戻ってしまいます。
チーム内での共有が行き届いていないと、特定箇所だけ省略している（していない）になる可能性も出てきます。
ESLintやPrettierなどで「この省略単語は使わない」のような設定ができるといいのですが…難しそうなので別方針にするのがオススメです。
省略後に4文字以上になるなら省略する
短すぎると他の意味として捉えられてしまったり、何の省略か他の人が見て分かりにくくなるので、明確に何文字以上であればOKという基準を作るのは1つの手です。
「省略語4文字以上になるなら省略する」と決めておけば明確です。
これで「ttl」「mv」「fv」などの、一瞬「なにこれ？」と迷いが生じるようなclassは減るでしょう。
省略はしない
もう「省略はしない」というのも、ルールとしてはシンプルで分かりやすいです。
class名が長くなってしまうデメリットはあるものの、省略しないと訳が分からなくなるようなレベルは別の問題な気がします。
