CSSの命名規則：BEM記法の基本を分かりやすく学ぶ！初心者向けガイド

CSSのBEM記法を使い始めてからしばらく経ちました。
誰に聞いたわけでもなく、どこからか情報を集めて使い始めたり、他人が作ったコードを改修する際に使ったりしながら覚えてきたわけですが、イマイチ理解できているようなできていないような…ということで自分なりに備忘録的にまとめてみました。記事タイトルに「初心者向けガイド」と偉そうに謳っていますが、自分自身向けという意味合いが大きいです。

BEM記法とは

BEM（Block Element Modifier）は、CSSのクラス名を整理しやすくするための命名方法の一つです。ウェブサイト、ページはたくさんの要素（ボタン、テキスト、画像など）でできていますが、それらを効率的に管理するのは大変です。BEMは、この問題を解決するために考案されました。

BEMは以下の3つの部分から成り立っています。

Blockについて

• 独立した要素で、何らかの意味を持つ単位。
• 例えば、ボタンやメニューなどがこれに該当します。
• 例: .button、.menu

Elementについて

• 特定のブロック内でのみ意味を持つ。
• 2つのアンダースコア (__) でBlockから分離します。
• 例: .block__element -> .button__icon、.menu__item

Modifierについて

• BlockやElementの見た目や動きなどを変更するための修飾子。
• 2つのハイフン (--) でブロックやエレメントから分離します。
• 例: .block--modifier -> .button--large、.menu--horizontal

BEM記法の記述例

BEM記法での命名は、前述のBlock、Element、Modifierの3つの概念を使います。それぞれの役割を思い出してみましょう。

• Block: ページの大きな部分や独立した要素。
• Element: Blockの中の一部としての小さな要素。
• Modifier: BlockやElementの見た目や動きを変更するもの。

以上を踏まえた、具体的な記述例がこちらのような形です。

/* Block */
.menu {
  ...
}

/* Element */
.menu__item {
  ...
}

/* Modifier for block */
.menu--dark {
  ...
}

/* Modifier for element */
.menu__item--active {
  ...
}

この例では、.menuがBlock、.menu__itemがその中のElement、そして.menu--darkや.menu__item--activeがModifierとして機能しています。

具体的には、menuというBlockが存在し、その中にitemというElementがあります。そして、menuBlockにはdarkというモディファイアが、itemElementにはactiveというモディファイアが存在する、という関係性がCSSクラス名から読み取れます。

このようにBEM記法を使うことで、クラス名だけ見てもその要素がページのどの部分で、どんな役割を持っているのかがわかりやすくなります。

BEM記法の命名で使われやすい単語例

状況に応じて使えるものはまだまだ色々あるかと思います。あくまで一例であるということを留めておいてください。

Block

• header: ヘッダーエリア
• footer: フッターエリア
• nav: ナビゲーション
• article: 記事やコンテンツのエリア
• button: ボタン
• form: フォームエリア
• modal: モーダルウィンドウ
• sidebar: サイドバー
• slider: スライダーやカルーセル
• tab: タブエリア

Element

• title: タイトルや見出し
• text: 本文や説明文
• icon: アイコン
• list: リストエリア
• item: リストの各項目
• label: ラベル
• input: 入力エリア
• thumbnail: サムネイル画像
• tooltip: ツールチップ
• badge: バッジやラベルタグ

Modifier

• large: 大きいサイズ
• small: 小さいサイズ
• dark: 暗いテーマや背景
• light: 明るいテーマや背景
• active: アクティブや選択状態
• disabled: 無効状態
• hover: ホバー時のスタイル
• primary: 主要なスタイルやテーマ
• secondary: 二次的なスタイルやテーマ
• success: 成功やポジティブな状態を示すスタイル

マルチクラスとシングルクラス

ウェブページの要素にスタイルを適用する方法として、複数のクラスを同時に使用する「マルチクラス」と、一つのクラスだけを使用する「シングルクラス」があります。BEMは基本的にシングルクラスを推奨していますが、それぞれの方法について理解しておくことも必要だと思います。

マルチクラス

複数のクラスを要素に適用する手法。一つの要素に複数のスタイルを組み合わせて使用することができます。

<button class="btn btn--large btn--primary">Click Me</button>

この例では、btn という基本のボタンスタイルに加え、btn--large で大きさ、btn--primary で主要なボタンの色やスタイルを適用しています。

シングルクラス

要素に一つのクラスだけを適用する手法。BEMはこの方法を推奨しています。

<button class="btn btnLargePrimary">Click Me</button>

この例では、ボタンの大きさと主要なスタイルが組み合わさった btnLargePrimary という一つのクラスでスタイルを適用しています。BEMの考え方を取り入れることで、シングルクラスでも綺麗に管理できるようになります。

まとめ

BEM記法は、大規模なプロジェクトやチームでの開発において効果的にCSSを整理・管理するための手法です。初めは少し複雑に感じるかもしれませんが、繰り返し使っていくことで自然と理解が深まります。

正直なところ、今でも複雑に感じていて悩んだりすることもありますが非常に便利だと感じているのも事実です。

ここはいつものごとく数をこなして慣れる！BEMを活用し、より保守性と可読性の高いCSSコードを書いていきましょう！