WebDesigner's Memorandumウェブデザイナーの備忘録

コーディング時のclass名の省略はどこまでして良いのか？「img / btn / ttl / desc / thumb」

コーディング時のclass名の省略はどこまでして良いのか？「img / btn / ttl / desc / thumb」

自分のコードを見返したり、人のコードを見るときにclassが省略されてあったりするのと、「あ、ここは省略するけどこれは省略しないんだ」など気づきがありました。

その上で「そもそも省略するのってどうなの？」と思ったので、コーディング時のclass省略について考えてみます。

よくある省略例

よく見る省略は下記の通りです。

省略例元の単語意味
imgimage画像
btnbuttonボタン
ttltitleタイトル
descdescription説明文
thumbthumbnailサムネイル（アイキャッチ画像）
mvmain visualメインビジュアル
fvfirst viewファーストビュー（メインビジュアルと同じ意味）
secsectionセクション（秒のsecondの場合もある）
icniconアイコン
headheaderヘッダー（<header>タグ使用時）
footfooterフッター（<footer>タグ使用時）
wrapwrapperラッパー、コンテンツを包む領域
contcontentコンテンツエリア
lglargeボタンのサイズなどに使われる
mdmediumボタンのサイズなどに使われる
smsmallボタンのサイズなどに使われる

自分の感覚だと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名が長くなってしまうデメリットはあるものの、省略しないと訳が分からなくなるようなレベルは別の問題な気がします。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね
カテゴリー
タグ
文章量
ソート
Twitterをフォロー Facebookでいいね

記事一覧

関連記事 人気記事 ランダム

目次

表示設定

ダークモード

この機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。