BEMを意識しよう

どうも、べ〜やんです。

今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。

HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。

BEMとは

BEM(ベム)とは、Block(ブロック)・Element(エレメント)・Modifier(モディファイア)の略で代表的なCSSの設定規則です。

クラス名の命名のルールやCSSの記述のルールを決めているものです。

使い方

命名の規則はblock__element–modifierが基本の形です。

セパレーター

基本的なセパレーターの使い方を紹介します。

BlockとElementの間はアンダースコア( _ )２つで繋ぐ。

ElementとModifierの間はハイフン( – )２つで繋ぐ。

複数の単語を繋げてBlock名やElement名をつける場合はハイフン( – )１つで繋ぐ。

複数の単語を繋ぐ場合はキャメルケースを使用してもOK、個人的にはこっちが好きです。main-content → mainContentなど。

上記以外でも以下の３つが区別できていればOKです。

BlockとElementとの区切り
BlockまたはElementとModifierとの区切り
複数の単語を繋ぐ区切り

Block

Blockはページを構成する大きな括りのことです。

ページはたくさんのBlockできている。

例：ヘッダー、フッター、ナビゲーション、商品説明など。

ページ全体のヘッダーを１つのBlockとしてpage-headerというクラスを与えるなど。

<div class="page-header">
  
</div>

Element

ElementはBlockを構成する要素です。BlockのないElementは禁止されています。

BlockはたくさんのElementからできている。

例：ヘッダーの中のロゴ、ナビゲーションの中のメニュー、商品説明の中の商品名など。

ヘッダーの中のロゴにpage-header__logoというクラス名を与えるなど。

<div class="page-header">
  <h1 class="page-header__logo">
     <img src="">
  </h1>
</div>

Modifier

ModifierはBlockやElementの状態を表すもの。

例：メニューの１つだけ色を変えるなど。

複数のメニューの中で１つだけ青にするのにheader-menu__item–blueというクラス名を与えるなど。

またModifierはBlock_key_valueやElement_key_valueのようにkey(名前)とvalue(値)とアンダースコア( _ )を使い同時に複数使用する事もできます。

例：list_type_check、list_type_discなど。

<ul class="list list_type_check">
  <li class="list__item">リスト１</li>
  <li class="list__item list__item--blue">リスト２</li>
</ul>
<ul class="list list_type_disc">
  <li class="list__item">リスト１</li>
  <li class="list__item list__item--blue">リスト２</li>
</ul>

メリット

チームでの開発がしやすい。
メンテナンスがしやすい。
クラス名だけでどの部分を指定しているのか理解できる。
コードの再利用性が高い。

デメリット

クラス名が長くなる。

おわりに

今回は、代表的なCSSの設定規則のBEMの基礎を紹介しました。

他の細かいルールもありますので、また別の機会に紹介します。