Skip to content

BEM再入門

CSS 設計として有名な BEM ですが、なんとなく使っている方も多いと思います。

そして、やりたいことに対してどのような規約があってどう実装すべきなのかわからなくなることも多いのではないでしょうか。

例えば私が直面したものだと、
  • CSS コード上では element は単体で定義するのか、block の子孫要素として指定するのか
  • modifier はマルチクラスなのかシングルクラスなのか
  • block__element1__element2 というような構造にしたいときはどうするのがいいのか

といったものがありました。

そこで、BEM の公式のドキュメントを読んで、基本がどうなっているのかきちんと理解しようと思い、調べてきました。

特に、理解があいまいだと困ることのあるものについて、まとめていこうと思います。

参考ページ:https://en.bem.info/methodology/quick-start/

全般

  • 単語の接続はハイフンで行う。
  • タグやIDセレクタでスタイルを指定しない。

BLOCK, ELEMENT, MODIFIER の基本

基本的な定義、使い方をまとめます。

BLOCK

定義のしかた
  • それ自身で独立したもの。周辺に影響を与えるようなプロパティ(margin や position)は持たせない。
  • 機能的、意味的に名前をつける。
使いかた
  • BLOCK 同士は、入れ子にして使うことができる。何階層でもよい。

ELEMENT

定義のしかた
  • BLOCK の構成要素で、それ自身では存在できないもの。
  • 機能的、意味的に名前をつける。
  • ダブルアンダースコア(__)でBLOCKとつなげて命名する
使いかた
  • ELEMENT 同士は、入れ子にして使うことができる。何階層でもよい。
  • ELEMENT 同士を入れ子にしても、CSS の指定はフラットにする。
  • ELEMENT は ELEMENT の構成要素にしてはいけない。常に BLOCK の構成要素になるようにする。block__element1__element2 のような命名をすることはできない。

MODIFIER

定義のしかた
  • BLOCK や ELEMENT の「見た目」「状態」「振る舞い」を定義するもの。
  • シングルアンダースコア(_)で BLOCK, ELEMENT とつなげて命名する。
  • Boolean 型と Key-value 型があり、Key-value 型の場合はKey と Value をシングルアンダースコア(_)でつなげて命名する。
使いかた
  • それが修飾する BLOCK や ELEMENT から独立しては使えない。(マルチクラスで指定する)

BEM を使う上でのテクニック

MIX

公式ページには BLOCK と ELEMENT の使い分け方についても書かれています。
  • 再利用される可能性があり、他のコンポーネントに依存しないのであれば、BLOCK として作成するべき
  • 親要素から独立して使うことができないのであれば、ELEMENT として作成するべき

BEM ではELEMENT の ELEMENT を作ることを認めていないので、ELEMENT をより小さな SUBELEMENT に分割したい場合は、BLOCK と ELEMENT として新たにコンポーネントを作成する必要があります。

また、その際に使える MIX というテクニックも紹介されています。

詳しくは公式ページを見ていただきたいですが、1つの DOM ノードに、異なる BEM 要素を適用するテクニックです。

ある BLOCK を、それ自体はそのままに、特定の要素の中では別の性質を持たせる、ということができるようになります。

File system

  • BLOCK, ELEMENT, MODIFIER ごとにディレクトリを分割し、対応する css, js を格納する。

要素ごとの独立性を高めるために、このような管理をすることが紹介されています。

まとめ

公式の Quick start を読んだだけですが、とりあえず最初に挙げた3つの疑問は解決することができました。

やはり公式ドキュメントに目を通しておくことは大事ですね。

  • CSS コード上では element は単体で定義するのか、block の子孫要素として指定するのか
    • → element は単体で、フラットに記述する。
  • modifier はマルチクラスなのかシングルクラスなのか
    • → マルチクラスで使う。
  • block__element1__element2 というような構造にしたいときはどうするのがいいのか
    • → MIX を使う。

Comments are closed.