CSSのクラス名決めに使うリスト
普段コーディングの際に採用している命名規則はBEMです。
BEMはBlock、Element、Modifierの略。
Block： 大枠となる独立した要素
Element： Block中の要素
Modifier： BlockやElementのスタイル
見た目やUIの機能をクラス名にするのではなく、デザインの意図やそのコンポーネントの役割をクラス名にすることとします。
接頭辞
BEMの接頭辞となる部分。
l - レイアウトコンポーネントのblock
c - コンポーネントのblock
u - utility（汎用）コンポーネントのblock
汎用的に使用できるクラス
形容詞
名詞の性質や状態を修飾する品詞。「〜の」「〜な」。
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 - qandaの類語、Frequently asked questions（よくある質問）の略。検索する
qanda - Question and answer（質問と回答）の略。検索する
input - フォームの入力画面。
confirm- フォームの確認画面。
finish - フォームの完了画面。
search-result - 検索結果画面。検索する
cart - 購入するアイテムを一時的に保存する画面。検索する
checkout - 保存していたアイテムを購入する画面。検索する
Elementとして使用できそうなクラス
section - 区分・区画。
content - 文書の内容。
article - 記事。
post - 投稿。
top - 頂上・上部。
home- トップページ。
sidebar - 補足記事。
wrapper - 内包する。
wrap - wrapperの略語。
container - wrapperの類語。容器・入れ物。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 - 概要・要約。
状態を示す動詞や形容詞
show - 見せる。
hide - 隠す。
open - 開く。
close - 閉じる。
current - 現在の。
active - 活動中・有効な。
disabled - 無効になっている。
この記事が気に入ったらサポートをしてみませんか？