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コードを書いていきましょう！
