【CSS】「CSS」の命名規則「BEM」とは

■ はじめに

■ 「CSS」での命名規則「BEM」とは
■ 命名規則「BEM」の「書式」
■ 命名規則「BEM」でよく使われる「単語」

「CSS」では、
「クラス名」「ID名」などの「名前」を自由に決めることができるが、
共同での「開発」「制作」では、
自由に「クラス名」「ID名」を指定しまうと、
「開発」「制作」を進めることができなくなる。


そこで、
「開発」「制作」をスムーズに進める為に、 「クラス名」「ID名」などの「名前」を決める「命名規則」が生まれた。

「BEM」は、
その「命名規則」の1つ。


Back

「CSS」での命名規則「BEM」は、
「Block Element Modifier」を略した名称で、
「CSS」での「設計」をする上での「命名規則」の1つ。


命名規則「BEM」では、

・Block： 全体をいくつかのブロックに分類し、レイアウトを担当する「ブロック要素」
・Element： ブロック要素の中で、「デザイン」「内容」を表示するための「インライン要素」
・Modifier： 「要素」をどのような「レイアウト」「デザイン」にするかの「プロパティ」

などの内容をベースとした「命名規則」が採用されている。
「保守性」の高さから、
「CSS」での開発で、最も多く使われている「命名規則」と言われている。


Back

命名規則「BEM」では、

・「block」と「element」の間は、「_（アンダースコア）」を「2つ」入力して区切る
・「Element」と「modifier」の間は、「-（ハイフン）」を「2つ」入力して区切る
・「_（アンダースコア）」と「-（ハイフン）」は「2つ」連続で入力して使用する
・「block」「element」「modifier」が、「複数単語」になる場合は、「単語」間に「-（ハイフン）」を「1つ」だけ入力して区切る

という「規則（記述ルール）」がある。

命名規則「BEM」での「クラス名」の「書式」

Back

命名規則「BEM」だけでなく、
「CSS」の命名規則で、良く使用されている「単語」が、
まとめられていました。

基本的には、
「HTMLコード」の内容を見ると、
わかりやすい「単語」を組み合わせで、
「クラス名」「ID名」が自然と決まる。

単語をあまり知らないと、
「命名」に手間取るので、
そんな時に、「よく使われる単語リスト」は役立つことがある。

単語	意味
Block
単語	意味
section	区分・区画
content	文書の内容
article	記事
post	投稿
top	頂上・上部
home	トップページ
sidebar	補足記事
wrapper	内包する
wrap	wrapperの略語
container	内包する
group	集まり
area	特定の場所・範囲
emphasis	強調・重視
catch	興味を惹く・関心をつかむ
note	注釈
description	概要
desc	descriptionの略語
introduction	前置き・導入
intro	introductionの略語
announce	お知らせ
information	情報
info	informationの略語
action	Call To Action重要度の高い
more	もっと多くの
feature	主要なもの
detail	詳細・細部
summary	概要・要約
Element
単語	意味
inner	内側の
outer	外側の
body	主要部分
head	上部
foot	下部
heading	見出し・表題
title	表題・題名
lead	見出しの補足・記事の要約
list	一覧・表
menu	一覧・表
item	（表やデータなどの）項目
unit	1つの単位・1セット
column	縦列
col	columnの略語
text	本文
caption	画像・図表の補足文
thumbnail	縮小した画像
thumb	thumbnailの略語
avatar	人の顔を示す画像
feature	特徴を補足する画像
tel	電話番号
address	住所
date	日付
time	日時
category	分類・部類
cat	categoryの略語
tag	識別子
next	次の
previous	前の
prev	previousの略語
mask	覆い隠す
overlay	かぶせる・上書きする
delimiter	アイテムの範囲や境界線を示す
separator	混ざらないように分離させたいときに使われる「セパレーター」
divider	区分する意味。分割する目的で使います
Modifier
単語	意味
success	成功
alert	注意・警戒
attention	配慮・気配り
error	間違い・失敗
caution	用心・警告
warning	警告・予告
danger	危険・驚異
tiny	とても小さい
xs	「tiny」の類語で、「Extra small（smallよりさらに小さい）」のこと
small	小さい
medium	中間
large	大きい
huge	とても大きい
xl	「huge」の類語で、「Extra large（特大・超大型）」のこと
reverse	反転する
push	前方に押す
pull	自分の方に引く
offset	相殺する・埋めあわせる
left	左側の
center	真ん中
right	右側の
top	上部
middle	真ん中
bottom	下部
round	角丸
circle	円形
分類
単語	意味
about	〜について
work	仕事・任務
product	製品
service	サービス
news	お知らせ・近況
event	行事・出来事
history	歴史・沿革
archive	保存・保管・記録
concept	構想・概念・考え
recommend	おすすめ・推奨
table of contents	目次
toc	Table of contentsの略語
index	索引・指標
contact	問い合わせ・連絡
inquiry	問い合わせ・質問・調査
access	交通手段
shop	店舗
related	関連のある
privacy	個人情報の利用・保護の方針
faq	「Frequently asked questionsquestions（よくある質問）」の「略語」
qanda	Question and answer・Q&A・質問と回答
input	フォームの入力画面
confirm	フォームの確認画面
finish	フォームの完了画面
search	検索する
result	検索結果画面
cart	購入するアイテムを一時的に保存する画面
checkout	保存していたアイテムを購入する画面
形容詞
単語	意味
main	主要な
primary	主要な
secondary	補助的な・第二の
tertiary	第三の
quaternary	第四の
common	共通の
global	全体的な
local	局所的な
general	一般的な
brand	ブランドの
site	サイトの
ステータス
単語	意味
show	見せる
hide	隠す
open	開く
close	閉じる
current	現在の
active	活動中・有効な
disabled	無効になっている
文字を扱う要素
単語	意味
link	アンカーテキスト
label	分類する・項目名
tag	符号・識別子
badge	残数を示す数値
copyright	著作権表示
tooltip	「マウスオーバー」した時に「補足情報」を表示する「インターフェイス」のこと
button	オン・オフの選択に使うインターフェイス
btn	buttonの略語
イメージ
単語	意味
image	画像
img	imageの略語
icon	対象の内容や機能などを小さな絵柄で表したもの
loading	読み込み中であることを示すインターフェイス
logo	社名や製品名などを「図案化」「装飾化」した「文字・文字列」
map	地図
chart	理解しやすいような方法で情報を示すリストやグラフのこと
graph	chartの類語で視覚表現のための手段のこと
hero	キービジュアルになる大型の画像
banner	（主に宣伝用の）画像をともなうリンク
carousel	「上下左右」に「スライド」させてる「インターフェイス」
slider	「carousel」の類語
ticker
lightbox
ナビゲーション
単語	意味
navigation	情報へ誘導するリンク
nav	navigationの略語。
global navigation	ほとんどの画面で表示されている主要なナビゲーション
local navigation	カテゴリ内専用のナビゲーション。
mega menu	カテゴリやページへのナビゲーション。
breadcrumb	パンくずリスト。トップページから現在ページまでの階層構造を示したリンク
topicpath	breadcrumbの類語
springboard	同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーション
list menu	縦に並んだリスト型のリンクで、階層構造をもったナビゲーション
dashboard	グラフやステータスなどを一つの画面にまとめたインターフェイス
pagination	昇順にしたページ番号付きのナビゲーション
linear navigation	その画面の前後に移動するためのナビゲーション。paginationとの違いはページ指定ができないこと
back to-top	ページトップに戻るためのページ内リンク
tab	書類などのインデックスタブを模した、画面内のコンテンツ表示を切り替えるインターフェイス
tabbar	おもに画面下部に固定されたタブで、画面全体を切り替えるインターフェイス
segmented control	機能的にはtabと同じで、見た目がタブではなくボタンである点が違う
off canvas	表示領域外から画面の大半を覆い隠したり（オーバーレイ）、ずらすようにスライドしながら表示するナビゲーション
side drawer	off-canvasの類語。drawerは「引き出し」の意味
toggle menu	同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多い
sitemap	サイト内のすべてのページへのリンクをリスト化したもの
sns	ソーシャルネットワーキングサービス
フォーム
単語	意味
form	送信フォーム。
login	ユーザー認証をするためのフォーム
signin	loginの類語
logout signout	ユーザー認証を解除すること
registration	ユーザー登録をするためのフォーム
signup	registrationの類語
step navigation	複数画面にわたるフォームの順序や、現在地を示したナビゲーション
search box	キーワード検索するためのフォームエリア
text field	input[type="text"]のような利用者が編集する改行なしのテキストフィールド
textarea	textareaのような利用者が編集する複数行のテキストフィールド
checkbox	input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス
radio	input[type="radio"]のような1つの項目を選択するインターフェイス
select	selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴
submit	送信ボタン
reset	リセット（取り消し）ボタン
modify	修正ボタン
その他
単語	意味
cards	トランプのような積み重なったカードのメタファーをもつインターフェイス。
dropdown	複数の項目を表示して、1つの項目を選択するインターフェイス。
pulldown	dropdownの類語。
accordion	折りたたまれたコンテンツを選択することで表示させるインターフェイス。
scroll tab	表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイス。
dialog	（主に）注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴。
toast	dialogの類語で、dialogとの違いは時間が経つと自動的に消えること。
popup window	dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。
toolbar	ユーザーが利用できるツールやアクションをまとめたインターフェイス。
comment	記事に対する反応。
table	テーブル・図表。
timeline	チャットや年表のように時系列に並べたリスト。

Back