クラス名に悩まないためのネーミングリストを作りました

クラス名に悩まないためのネーミングリストを作りました

こんにちは。

サイトのチーム制作やメンテナンスにおいて、どんなルールで命名しているのか分からなくなってしまうことがしばしばネックとなります。

「単語名 英語」で出た単語を使ったけど若干意味合いが違っていて見た人を混乱させてしまう…なんてこともよく起こります。
少なくとも自分はよく起こっていて困っていました。

そこで今回は、自分がよく使うBEMを意識したクラス名のリストを作ったので紹介します。

ページ / Block

サイトのページ名やカテゴリ名として使います。
一つのページに複数カテゴリが入る場合はBlockとして使います。

about◯◯について index トップページ・目次
accessアクセス・交通手段 news お知らせ・ニュース
archiveアーカイブ・記録・過去の記事 privacy 個人情報について
conceptサイトの構想・考え方 product 商品・製品
contactお問い合わせ recommend おすすめ
event行事 search 検索
faqQandA(Question and Answer)の同義語 service サービス
history沿革・歴史
work
仕事・業務内容

Block

BEMのBlockで使います。

announceお知らせ
article記事
area地域・場所
box入れ物・枠
cardカード
container容器・入れ物
wrapperはレイアウト的に、containerは意味的に使う
content内容
descdescriptionの略・概要
detailディテール・詳細
feature主要・特徴
groupグループ・集まり
homeホーム・トップ
infoinformationの略・情報
innercontainerに入る中身
introintroductionの略・導入
moreさらに
note注釈
post投稿
sidebar補足の記事
summary要約・概要
topトップ・ホーム
thumbthumbnailの略・サムネイル画像
userユーザ・投稿者
wrapwrapperの略・くくり

Element

BEMのElementで使う名詞や形容詞です。

address住所・場所
alert注意・警告
arrow矢印
avatarプロフィール画像
bodyメイン・主要
caption画像、図、表の脚注
catcategoryの略・分類・カテゴリ
caution注意
colcolumnの略・カラム・縦列
common共通の
date日付
general一般的な
global全体共通の
heading見出し・表題
horizontal水平線
item中身・項目
list一覧・表
local一部分の・局所的な
main主要な・メインの
mask覆う・マスク
menuメニュー・一覧
next次の
overlay覆う・上書き
prevpreviousの略・前の
separator区切り・仕切り
tel電話番号
text本文・文字
time時間(日付はdate)
title表題(≒h1)

Modifier

BEMのModifierで用いる、状態などを表す形容詞や名詞です。

active有効な
bottom下部
center中央
circle
close閉じる
current現在の
disabled無効な
error失敗・エラー
hide隠す
left左の
lglargeの略・大きな
mdmediumの略・中間の
middle真ん中の
offset相殺
open開く
reverse反転した・逆の
right右の
round角丸
show見せる
sm小さい
success成功
top上部
xlクソでかい
xsクソ小さい
warning警告

その他UI

その他よく使うUIパーツの名詞です。

リンク / ボタン

backToTopページトップへ戻る
badge数値・バッジ
breadcrumb パンくずリスト
btnbuttonの略・ボタン
backToTopページトップへ戻る
copyright著作権表示・©️
dashboardグラフや表などがまとまったもの
gNav共通のナビゲーション
label識別子・ラベル
linkリンク・アンカーテキスト
listリスト
navnavigationの略・ナビゲーション
pagenationページネーション
sitemapサイト内のリンクをリスト化したもの
snsSNSボタンなど
tabbarタブUI
tag識別子・マーク
toggleON/OFFを切り替えるUI
tooltipマウスオーバーなどで表示される脚注や補足

画像

banner宣伝用の画像リンク
carousel画像をスライドなどで切り替えるUI
chart表やグラフなど
heroメインビジュアル
iconアイコン
imgimageの略・画像
loading読み込み中を示す画像
logoロゴ
modalクリックなどで要素が大きく表示されるUI

ドンピシャな名前見当たらないんだけど?

上の表は自分がよく使うと思ったクラス名なので、適しているものがない場合もあると思います。

そんなときはぜひこちらのネーミング辞書サイトcodicを使ってみてください。

例えば、投稿一覧のUIを作る際にクラス名に悩んだ時は、codicに「投稿一覧」と入力すれば「post_list」と提案してくれます。

登録すれば辞書を好みにカスタマイズすることもできるようになっています。

まとめ

HTML/CSSの内部品質を上げるためには設計手法が大事ですが、機能と意味が乖離しない命名も非常に重要になってきます。

この記事ではネーミングの基準のようなものを作りたいと思い、クラス名でよく使われる単語をBEMに合わせて分類しまとめてみました。

皆さんのコーディングの参考になればと思います。
それでは。

web制作カテゴリの最新記事

ページトップへ戻る