- コーディング
【WordPress】データベースのデータを取得して動的に投稿ページを生成する
- #WordPress
- コーディング
BEM記法の命名規則をご紹介！筆者が普段使う命名規則をまとめてみた！
- #命名規則
こんにちは！
まついちです。
SASS（SCSS）を使ってレイアウトを構築する際に相性が良いと言われているBEM記法ですが、
命名規則で迷った事ありませんか？
他社ではどうしているのだろう？他のマークアップ担当者はどうしているのだろう？
そんな風に思った事はありませんか？
私は駆け出しWEBデザイナーの頃、CSSの命名規則で同じように悩んだ思い出があります…。
id名、class名はどうルール付けしたらよいのだろう…と。
BEM記法を使い始めた頃は検索しても、それ自体の説明ばかりで、
どういう命名規則があるのか記載されているサイトがなく苦労しました。
このブログでもSASS（SCSS）とBEM記法を使って構築しましたが、
私が普段使っている命名規則をまとめてみました。
CSSのclass名の考え方をベースにしています。
BEM記法とは？
まずは、BEM記法のおさらい。
BEMはBlock Elment Modifierの略で、CSSを設計・命名していく手法です。
- Block・・・ブロック
- Elment・・・要素
- Modifier・・・装飾
BEM記法のルール
- Element、Modifierは省略可能、Blockは省略不可
- BlockとElmentはアンダースコア（ __ ）2つで区切る
例：Block__Elment - ElmentとModifierはハイフン（ — ）2つで区切る
例：Elment–Modifier - 単語が複数になる場合はハイフン（ – ）1つで区切る
Block、Elment、Modifierいずれにおいても - 同じ単語を繰り返し使用する場合は01,02・・・と連番にする
Block
| 単語 | 説明 |
| wrapper | 内包する |
| container | 容器 |
| content | 内容 |
| section | 区切り |
| block | 区切り |
| outer | 外側 |
| inner | 内側 |
| header | ヘッダー |
| footer | フッター |
| article | 記事 |
Element
| 単語 | 説明 |
| nav | ナビゲーション |
| tab | タブ |
| ttl | タイトル |
| outline | 目次 |
| txt | テキスト |
| lead | リード文 |
| list | リスト |
| link | リンク |
| item | 項目 |
| detail | 詳細 |
| menu | メニュー |
| box | 1つの単位 |
| thumb | サムネイル |
| time | 日時 |
| next | 次の |
| prev | 前の |
| overlay | かぶせる。lightboxの実装でよく使う。 |
| feature | 特徴 |
| top | 上部 |
| middle | 真ん中 |
| bottom | 下部 |
Modifier
| 単語 | 説明 |
| active | 動作している |
| deactive | 動作していない |
| new | 新しい |
| color | red,yellowなどのcolorを設定。例：Block__Elment–red |
| alert | 警告 |
| att | attentionの略。注意 |
| success | 成功 |
| error | エラー |
よく使う組み合わせ
ヘッダー（Block + Block）
<header class="header">
<div class="header__inner">
ヘッダーの内容
</div>
</header>ナビ（Block + Element）
<nav class="nav">
<ul class="nav__inner">
<li class="nav__list">
<a href="#" class="nav__link">ナビ01</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">ナビ02</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">ナビ03</a>
</li>
</ul>
</nav>タブ（Block + Element + Modifier）
<ul class="tab">
<li class="tab__list">
<a href="#" class="tab__link tab__link--active">タブ01</a>
<li>
<li class="tab__list">
<a href="#" class="tab__link">タブ02</a>
<li>
<li class="tab__list">
<a href="#" class="tab__link">タブ03</a>
<li>
</ul>セクション（Block + Element）
同じ単語を繰り返し使用する場合は連番で指定する。
<section class="section01">
<div class="section01__inner">
セクション01の内容
</div>
</section>
<section class="section02">
<div class="section02__inner">
セクション02の内容
</div>
</section>まとめ
BEM記法で構築することで、
ブロック内で完結するので、他のブロックまたは他のページとバッティングしにくくなるのが非常にメリットだと思います。
また、ヘッダー、フッターなど、コンポーネントごとにまとめるので、
制作者以外でも命名ルールを理解しやすくなります。
これを機にBEM記法を導入を検討してみてはいかがでしょうか？
