はじめに
CSS設計の世界で、BEMという命名規則が注目されています。BEMは、ウェブサイトの構造をブロック、エレメント、モディファイアという3つの要素で整理し、コーディングの効率化と保守性の向上を実現します。本記事では、BEMの概要から具体的な活用方法まで、詳しくご紹介していきます。
BEMとは
BEMは、Block、Element、Modifierの頭文字を取った命名規則です。この設計思想は、CSSの可読性と再利用性を高め、複雑なプロジェクトでも柔軟に対応できるようにします。
Block
Blockは、ページ上で機能的に独立した要素のことを指します。ヘッダー、フッター、メニューなどのコンポーネントがBlockに該当します。
Blockは再利用可能で、他のBlockとは原則的に干渉しません。そのため、設計の自由度が高く、コーディングが簡潔になる利点があります。
Element
Elementは、Blockのさらに細かい部品に当たります。例えば、メニューのリストアイテムは、メニューBlockのElementと言えます。
ElementはBlockに依存しており、単独では存在しません。そのため、ElementのスタイリングはBlockの一部として行うのが一般的です。
Modifier
ModifierはBlockやElementの状態や見た目を変化させるための装飾的なクラスです。例えば、「active」や「disabled」など、要素の状態を示すクラスがこれに当たります。
Modifierを使うことで、コードの可読性が高まり、要素の状態を柔軟に制御できるようになります。
BEMの命名規則
BEMでは、Block、Element、Modifierに対して一定の命名規則が設けられています。この規則に従うことで、コーディングの一貫性が保たれ、チーム開発での効率も上がります。
Blockの命名規則
Blockの命名には、次のようなルールが適用されます。
- 単語はケバブケース(ハイフン区切り)で書く
- 名詞を使う
- 接頭辞や接尾辞は付けない
例: menu、header、carousel
Elementの命名規則
Elementの命名は、次のようになります。
- 親Blockのクラス名に続けて、アンダースコア(_)とElementのクラス名を付ける
- Elementのクラスはケバブケースで書く
例: menu_item、header_logo、carousel_slide
Modifierの命名規則
Modifierは以下のルールに従います。
- 対象のBlockやElementのクラス名に続けて、ダブルアンダースコア(__)とModifierのクラス名を付ける
- Modifierのクラスはケバブケースまたはキャメルケースで書く
例: menu_item–active、header_logo–small、carousel_slide__hover
BEMを使ったコーディング
BEMの命名規則をマスターすれば、実際のコーディングでも活用できます。基本的には、HTMLの構造に沿ってBlockとElementを配置し、必要に応じてModifierを適用します。
HTMLマークアップ
まずはHTMLマークアップから見ていきましょう。BlockとElementはdiv要素で構成されることが多く、クラス名には先程の命名規則が適用されます。
上記の例では、「menu」がBlockで、「menu_item」がElementです。さらに「menu_item–active」と「menu_item–disabled」がModifierとなっています。
CSSスタイリング
次にCSSでのスタイリングを見てみましょう。BEMに従えば、Blockの中でElementとModifierのスタイルを記述することになります。
.menu {
/* Blockのスタイル */
}
.menu_item {
/* Elementのスタイル */
}
.menu_item--active {
/* Modifierのスタイル */
}
.menu_item--disabled {
/* 別のModifierのスタイル */
}
このようにBlockとElementのスタイルを分けることで、コードの可読性が高まり、保守性も向上します。
まとめ
BEMは、コーディングをコンポーネント化し、構造を明確化する有用な命名規則です。Blockの再利用性がコーディングの効率化に繋がり、ElementとModifierの活用によってカスタマイズの自由度も高くなります。まずは基本ルールを覚え、実際のプロジェクトで活用してみることをおすすめします。BEMの考え方を取り入れることで、より整理された、生産的なコーディングが実現できるはずです。
