もう迷わない!CSSのclass名の付け方が解消する命名リスト

HTML

class名の命名語をまとめておくメリット

class名を考えることはコーディングにおいて、時間をかかる作業です。

かといって、適当に決めたclass名では、運用時に困ることも多々あります。

 

この記事では、

『class名の命名を考える時間がもったいない。』

『class名の付け方がイマイチわからない。』

『適当にclass名をつけて後で困る。』

そんな悩みを持たれてる方に向けて、class名を考える時間を減らし、管理のしやすい時短コーディングにつながる命名語の付け方をお伝えします。

よく使うCSSのclass名の命名語

ここでは基本的にBEM(MindBEMding)の命名規則に基づいて、使うことを前提に紹介します。

ただし、BEMを使用していない方についても参考になるとは思います。

 

BEM(MindBEMding)とは

block__element__modifierという命名規則でclass名をつける方法です。

気がつかないうちに同じクラス名を使ってしまって、cssが管理できなくなることを防いでくれます。

class名が.textだけだと、他の文章の箇所でclass名を使ってしまうこともありますよね。

class名を見ただけでも、どこのtextかパッはわかりません。

 

blockはエリアを表す単語

elementは要素を表す単語

modifierは状態を表す単語

をつなげて命名します。

 

blockとelementをつなぐ時は『__』

modifierをつなぐ時は『–』を使用します。

 

block__element–modifierの命名規則でつけたclass名を具体的に例に挙げて解説します。

class名『topInfo__btn–active』

block→トップページの新着情報(topInfo)

element→ボタン(btn)

modifier→アクティブ(active)

つまり、『トップページの新着情報にあるボタンがアクティブ状態』を表したclass名になります。

BEMの命名規則にすることで、class名を見ただけで、だいたいこのclass名がどこで使われているかってわかりやすくなりました。

 

modifierはないこともあるので、『トップページの新着情報にあるボタン』を表したいのであれば、『topInfo__btn』になります。

BEMは他にも色々ルールがあるので、興味がある方は、調べてください。

CSSの設計する際に、運用をしやすいFLOCSS(フロックス)など使う場合にも使うので、覚えておいて損はないです。

 

blockでよく使う命名語

見た目や性格を表す言葉を使うことが多い。

略語は一般的なもののみ使用。(txtやttl、img、btnなど)

それ以外は他の人が見ても理解できないため略さない。

コンポーネントでよく使う命名語

ボタン btn

カード card

ヘッダー header

フッター footer

フォーム form

表(table) table

タブ tab

サーチ search

メニュー meny

ナビ nav

ヒーローイメージ hero

メインビジュアル mainvisual

パンくず crumbs

ページ名やコンテンツエリア名に依存(ページのディレクトリー名に合わせる)

トップ top

沿革 history

企業情報 about,company

サービス service

実績 works

製品 product

コラム column

新着情報、ニュース info,news

料金、価格 fee

施設 facility

アクセス access

よくある質問 faq

お問い合わせ contact

プライバシーポリシー praivacy

強み strength

 

 

ex)トップページのタイトルの場合、topTtlなど,ブロックの要素は2語を足す場合はキャメルケースにする。

トップページの新着情報のブロックの場合、topInfo

お問い合わせページのフォームの箇所は、contactFormなど

ページ名の下層に主に付ける語句

セクション sec,section

elementでよく使う命名

機能や要素を表す言葉が多い

タイトル ttl,title,heading

サブタイトル subttl,subtitle

タイトルの補足 lead

文章 txt,text

写真、画像 img,photo

サムネイル thumb

キャプション cap,caption

日付 date,time

著者 author

詳細 detail

ロゴ logo

電話 tel

メール mail

コピーライト copy,copyright

バナー bnr,banner

ヘッダー header

フッター footer

リスト(主にul,olに使う) list

リスト(主にliに使う) item

インナー(レイアウト調整に使う) inner

ラップ(レイアウト調整に使う) wrap

リンク(aタグに使う) link

インプット input

ボタン btn

modifierでよく使う命名語

modifierは主に状態を表す言葉を使うことが多い。

色にまつわるもの red,blue,green

奇数、偶数 odd,even

アクティブな状態 active

現在の状態 current