HTML, CSSを記述する際、CSS設計が大切ですが、
どのような単語で命名するかも重要だと考えています。

名前と機能の意味が推測しやすい単語を使い、
名前のつけ方にブレがないようにしようと思いつつも、
ついついその時々で違う単語を使ってしまうため、自分用によく使う単語をリストアップしました。

#ブロック
BEMのBlockで利用されるような名称

単語	意味
section	区分・区画
content	文書の内容
article	記事
post	投稿
top	頂上・上部
home	トップページ
sidebar	補足記事
wrapper	内包する（レイアウト的に使用することが多い）
wrap	wrapperの略語
container	wrapperの類語容器・入れ物（意味的に使用することが多い）
group	集まり
area	特定の場所・範囲
catch	興味を惹く・関心をつかむ
note	注釈
description	概要
desc	descriptionの略語
introduction	前置き・導入
intro	introductionの略語
announce	お知らせ
information	情報
info	informationの略語
more	もっと多くの
feature	特徴
detail	詳細・細部
summary	概要・要約

#要素・パーツ
BEMのElementで利用されるような名称

単語	意味
inner	内側の
outer	外側の
body	本文要素
head	上部
foot	下部
heading	見出し・表題
title	表題・題名
lead	見出しの補足・記事の要約
list	一覧・表
menu	メニュー
item	（表やデータなどの）項目
unit	1つの単位・1セット
column	カラム、縦列
col	columnの略語
text	文章
caption	画像・図表の補足文
thumbnail	サムネイル、縮小した画像
thumb	thumbnailの略語
avatar	アバター、人の顔を示す画像
tel	電話番号
address	住所
date	日付
time	日時
category	分類・部類
cat	categoryの略語
tag	識別子
next	次の
previous	前の
prev	previousの略語
mask	覆い隠す
overlay	かぶせる・上書きする
delimiter	アイテムの範囲や境界線を示すインターフェイス
separator	delimiterの類語（混ぜないように分離する目的で使用）
divider	delimiterの類語（グルーピングするように分割する目的で使用）

#ユーザーインターフェース（UI）
####テキスト

単語	意味
link	アンカーテキスト
label	分類する・項目名
tag	符号・識別子
badge	残数を示す数値
copyright	著作権表示
tooltip	マウスオーバー時に表示する補足情報
button	ボタン
btn	buttonの略語

####画像

単語	意味
image	画像
img	imageの略語
icon	アイコン
loading	読み込み中
logo	ロゴ
map	地図
chart	チャート（リストやグラフ等）
graph	chartの類語、グラフ
hero	キービジュアルになる大型の画像
banner	画像をともなうリンク（主に宣伝用）
slider	スライダー（選択した一連の要素を順次表示するもの）

####ナビゲーション

単語	意味
navigation	情報へ誘導するリンク
nav	navigationの略語
global-navigation	主要なナビゲーション（全体で使用）
local-navigation	あるカテゴリ内専用のナビゲーション（局所的に使用）
mega-menu	多階層の項目を表示する展開可能なメニューの一種
breadcrumb	パンくずリスト（トップから現在ページまでの階層構造を示すもの）
topicpath	breadcrumbの類語
springboard	同じサイズのリンクを2×2や3×3のように配置したナビゲーション
list-menu	縦に並んだリスト型のリンクで、階層構造をもったナビゲーション
dashboard	グラフやステータスなどを一つの画面にまとめたインターフェイス
pagination	分割したページ番号を示すリンク
linear-navigation	その画面の前後に移動するためのナビゲーション（ページ指定不可）
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	サインアウト。logoutの類語
registration	ユーザー登録
signup	registrationの類語
step-navigation	複数画面にわたるフォームの順序や、現在地を示したナビゲーション
search-box	キーワードを入力するためのフォームエリア
text-field	テキストを入力するフィールド（改行なし）
textarea	テキストを入力するフィールド（複数行）
checkbox	チェックボックス
radio	ラジオボタン
select	セレクト
submit	送信ボタン
reset	リセット（取り消し）ボタン
modify	修正ボタン

####その他

単語	意味
cards	カードのようなインターフェイス
dropdown	ドロップダウンリスト
pulldown	dropdownの類語
accordion	折りたたまれたコンテンツを選択することで表示させるインターフェイス
scroll-tab	スクロールすることで非表示部分を見ることができるインターフェイス
dialog	（主に）注意や警告を知らせ、ユーザーに操作を要求するメッセージ
popup-window	dialogの類語で、小さなウィンドウで表示するインターフェイス
toolbar	ユーザーが利用できるツールやアクションをまとめたインターフェイス
comment	コメント、記事に対する反応
table	テーブル・図表
timeline	チャットや年表のように時系列に並べたリスト

#ステータス
状態を表す単語

単語	意味
show	見せる
hide	隠す
open	開く
close	閉じる
current	現在の
active	活動中・有効な
disabled	無効になっている

#形容詞

単語	意味
main	主要な
primary	主要な
secondary	補助的な・第二の
tertiary	第三の
quaternary	第四の
common	共通の
global	全体的な
local	局所的な
general	一般的な
brand	ブランドの
site	サイトの

#サイト内の分類
サイト内のページやカテゴリーとして使用する名詞。

単語	意味
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 questions（よくある質問）の略
qanda	Question and answer（質問と回答）の略
input	フォームの入力画面
confirm	フォームの確認画面
finish	フォームの完了画面
search-result	検索結果画面
cart	購入するアイテムを一時的に保存する画面
checkout	保存していたアイテムを購入する画面

#修飾子
BEMの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	円形