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を䜿甚しお、蚭定した内容を保存しおいたす。個人を特定したりするものではありたせんが、気になる方はプラむバシヌポリシヌをご芧ください。