読者です 読者をやめる 読者になる 読者になる

nomal note

新人Webデザイナーが個人的に覚えたり作ったりしたコードを投下していきます。検証用なので支離滅裂注意。

BEMに基づいたCSS命名規則について考えてみた

 

皆さんこんにちはnomalです。

最近ブログをはじめたから余計にMacBook Airほしいなーなんて考えてます。MacBook Proを購入して五年目だけど、あと三年くらいは頑張ってくれそう。Mac貯金はじめようかな。

 

さて、今日はサイトをコーディングするにあたって必要なマークアップについてです。

マークアップエンジニアという役職があるくらい、マークアップって重要!と一本新規で1ページコーディングを経験した私は、心の底から作ってる最中に感じました。マークアップ構成をグダるとCSSがどんどん長くなってしまって、一ヶ月後に修正が入った時に「あれ?ここなんでこんなプロパティ入ってるんだっけ?」とか「そもそもどこを修正したら良いのか分からない!」なんて事態に作った本人が陥りがちです。

故に、他の人が代理修正するときに激しく時間をロスする可能性だってあるわけです。

自分だけじゃなく、他人の時間を奪うことなんて社会人としてNGですね。

 

と、いうわけでCSSのclassやidの命名規則BEMという定義を参考にしてまとめていきたいと思います。

 

 

 CSSのBEMを参考にした命名規則

★そもそもBEMとはなんぞや。

 

f:id:nomal_f:20160221125012p:plain

 

Bock(ブロック), Element(エレメント), Modifier(モディファイア) の頭文字をとって BEMです。親要素_子要素_孫要素のような形で階層をつけて命名していくといえば、分かりやすいでしょうか。

 

★HTML編

★書き方のルール

「ページ名」_「部位」_「種類:必須」_「詳細」「番号(連番)」_「状態」.「拡張子

上記のルールに沿って、カテゴリ分けしていきます。((こちらは、ゆくゆくはデザインのパターン化が発生する事を加味しての命名規則ですので、シングルクラスを否定しているわけではありません。(シングルクラスもコード量が少なくデザイン崩れを防ぐ利点もあります)))

ファイル名に半角スペースは使ってはいけない。などの概要は割愛します。

参考サイトさまの記事新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]|クロノドライブを御覧ください。

 

★よくfloatなどで迷走するdivの命名で例えてみた

<div class="block">
    <div class="block__element"></div>
    <div class="block__element--modifier"></div>
</div>

f:id:nomal_f:20160221143018g:plain

 長え!!と拒絶反応を起こす人もいるかもしれませんが、パスを通す感覚で慣れてしまえば、使い易くなると思います。

ただ、そのBEMに乗っ取りすぎるのは現実的ではないという意見もあり、私自身も大枠は参考にし、あとは社内で分かりやすい命名規則を共有し確率できたらなと考えています。

 

 では、具体的な説明を参考サイト様よりひっぱってきます。

 

各名称の説明

➀「ページ名」

どのページで使用しているかを判断するために付けます。
ただし、画像フォルダがページごとに分かれている場合不要です。

例)

  • 画像フォルダがページごとに分かれていない場合(/img/) > index_news_bg01.gif
  • 画像フォルダがページごとに分かれている場合(/img/index/) > news_bg01.gif

➁「部位」

どの部分で使用しているかを判断するために付けます。
ただし、どこにも該当しない場合や付けられない場合には不要です。

例)

  • 新着情報で使用している背景の場合 > news_bg01.jpg
  • サイドバーで使用している画像の場合 > side_img01.jpg

※部位に関する命名規則のまとめはコチラ

③「種類」

どのような種類の画像なのかを判断するために付けます。
種類に関しては必ず付けるようにしましょう。

例)

  • 写真画像 > img01.jpg
  • ヘッダーで使用しているロゴ画像の場合 > header_logo.gif

※種類に関する命名規則のまとめはコチラ

④「詳細」

「種類」に対して詳細な説明が必要な場合に付けます。

例)

  • 送信するボタンの場合 > btn_submit.png
  • 丸いアイコンの場合 > icon_circle01.png

※基本的にはbtnとiconやnavのように汎用的な画像にしかつけません。

⑤「番号」

同じ用途の画像が複数あった場合に、番号を付けて分けます。
その際、付ける番号は必ず連番とします。

例)

  • トップページで使用する写真Aの場合 > index_img01.jpg
  • トップページで使用する写真Bの場合 > index_img02.jpg

⑥「状態」

ロールオーバーやカレントなどの、状態を表す必要がある際に付けます。

例)

  • グローバルナビに使用する画像の場合 > nav_index_out.png,nav_index_over.png
  • 現在地がindexページであることを示すグローバルナビ画像の場合(※) > nav_index_over.png
  • レティーナディスプレイ用の画像の場合 > img_index_retina.png
  • レスポンシブウェブデザインの際、スマートフォンでのみ使用する場合 > img_index_sp.png

※意味としてはcurrentが正しいですが、currentとして指定される画像はoverと同様のものが指定されることが多いので、同じ画像を2つ作成しないためにoverを使用します。

この規則を守ることで以下のようなメリットがあります。

  1. どんな種類の画像なのか、ファイル名だけで推測出来る
  2. どこで使われているか、ファイル名だけで推測出来る。
  3. 構造を意味する名前を付けることで、後々画像が変更になった場合でも画像名を変更せずに更新出来る。
名前を付ける時のポイント

ルールが決まった所で、名前を付ける際に気を付けるポイントを具体例と合わせて説明していきます。

1.特定の部位に使うことがわかっている場合、その部位の名前をファイル名に含める。

例)

  • 見出しに使う画像の使う場合 > index_ttl01.gif
  • ヘッダーの背景に使う場合 > header_bg.gif

2.見出し要素に使う画像や写真画像は複数存在する可能性が高いため、必ず連番を付ける。

例)

  • トップページの見出しに使う画像の場合 > index_ttl01.png
  • ブログページの写真に使う画像の場合 > blog_img01.jpg

3.一つの要素に複数の画像を使う場合は連番にする

例)

  • ヘッダーに背景画像を2つ使う場合 > header_bg 01.gif, header_bg 02.jpg

4.要素・セレクタは同じだが、それぞれ違う画像を使う場合は要素名の直後に連番を入れること。

例)

  • Aという見出しに使う背景画像の場合 > ttl_bg01.gif
  • Bという見出しに使う背景画像の場合 > ttl_bg02.gif

5.ロールオーバー用の画像などはアンダーバー区切りで状態を表す英単語をつけること。

  • 通常     :○○_out.png
  • ロールオーバー:○○_over.png
  • 選択状態 ※1:○○_selected.png
  • 現在地  ※2:○○_current.png

例)

  • btn_contact_out.png
  • btn_contact_over.png
  • nav_news_selected.png
  • nav_news_current.png
  • ※1 クリック等により、選択状態として画像が登録されている際に使います。
  • ※2 ナビ等に該当するページの内容が含まれている際に使用します。

  「種類」まとめ一覧

画像や見出し、ボタンなど「種類」についての規則のまとめです。

「種類」

種類規則
画像、図、写真 img
サムネイル thumb
バナー bn
ボタン btn
ロゴ logo
ナビ nav
見出し ※1 ttl
テキスト txt
アイコン icon
(アイコン以外の)背景 bg
矢印 arrow
line
ページトップ ※2 pagetop
スペーサー ※2 spacer
ロード中 ※2 loading

※1 見出し要素(hx)に使用する画像は、hxの名称を付けない方が更新性が高い。(見出しレベルが変更になった際に、画像名の変更を伴わないため)

※2 単独で使用することが多いため、「種類」のみで使用する。

例)

  • ページトップ > pagetop.gif
  • スペーサー > spacer.gif

「部位」まとめ一覧

コンテンツやカテゴリなどの規則まとめです。

「部位」

部位規則
新着情報 news
お問い合わせ contact
ページ全体 container
ヘッダー header
サイドバー side
フッター footer
メインコンテンツ main
次へ next
前へ prev
お知らせ info
リスト list
注釈 notes
レイアウトのためのボックス unit,box,col,area

※もっと詳しいリストをまとめたページはコチラになります。

 

★id・class名編

それでは、id・class名の命名規則についてお話していきます。

名前を付ける時のポイント

私がid・class名を付ける際に気を付けている事を、具体例と合わせてご紹介します。

1.idは大枠のレイアウトを構成する要素(例えばヘッダー・グローバルナビ・コンテンツ・サイドバー・フッター、セクションなど)に使用し、classはその中に入る子要素に使用する。

例)

  • ヘッダー > #header
  • グローバルナビ > #gNav
  • お問い合わせボタン > .btnContact
  • ページトップへ戻る > .pageTop

2.id・class名はデザインから決めるのではなく、「何処で」「何を表現」するのかを端的な名前で表す。

NG例)

  • 通常テキストよりも文字サイズが小さい注釈 > .small
  • 赤字コメント > .red
  • 左寄せのブロック > .left

OK例)

  • 通常テキストよりも文字サイズが小さい注釈 > .notes
  • 赤字コメント > .comment
  • 左寄せのブロック > .box

NG例とOK例の違いですが、NG例の場合には、注釈の色が変わってしまった場合「small」という小さいの意味をなさなくなってしまいます。
しかし「notes」という注釈の意味のid・class名を指定することで、色が変更になった際にも「notes」の意味を成さなくなることはありません。
同様に、「red」や「left」などのデザインを表してしまっているid・class名を付けるのは好ましくありません。

3.デザイン上、1つの要素では再現できない場合は「inner」を使用する。(背景が2つ重なっている時など)

例)<div id="header">

     <div class="inner">

      </div>

   </div>

  

  • ※before、after擬似要素で再現できる場合には、不要な要素を増やさない意味で「inner」は使用しないようにしましょう。

4.「構造の意味が判断つかないもの」「構造の意味がないもの」には凡庸的な名前をつける

  • 例)
  • レイアウトのためだけのボックス > box

  • 2カラムのレイアウト > unit2Col

  • 3カラムのレイアウト > unit3Col

よく使うid・class名まとめ一覧

要素id・class名
ページ全体 container
ヘッダー header
サイトのタイトル siteTtl
ロゴ logo
キャッチフレーズ catch
ナビゲーション nav
グローバルナビゲーション gNav
パンくずナビゲーション pagePath
コンテンツエリア conts
メインコンテンツ main
サイドバー side, sideBar
フッター footer
記事 article
内側(入れ子構造) inner
案内 guide
話題 topic, topics
注目情報 spotLight
選び出す pickup
次へ next
前へ prev
ページトップへ pageTop
もっと見る more
お知らせ info
ニュース news
日付 date
更新履歴、沿革 history
リスト list
項目 item
商品のリスト goodsList
写真エリア photo, img
テキストエリア txt
図版エリア figure
注釈 notes
バナー bn
お問い合わせ contact, inquiry
非表示 hidden,
広告 pr
現在位置 current
リード文 lead
最初の項目、最後の項目 first(最初), last(最後), firstChild, lastChild
奇数列、偶数列 odd(奇数), even(偶数)
レイアウトのためのボックス unit, box, col, area
他の要素に組み合わせて使う box, area

※もっと詳しいリストをまとめたページはコチラになります。

 

以上です。いかがでしたでしょうか。ほぼ、参考サイトさまの引用となりましたが、大変勉強になった記事でしたので、ぜひそちらのサイト様で理解を一層深めていただけたら幸いです。

 

 

参考サイト様

html-coding.co.jp

tech.recruit-mp.co.jp

app.codegrid.net