こんにちは！Webデザイナー兼29歳にして両膝擦りむいちゃった担当のさいさいです。

前回はCSS設計の具体的な手法としてOOCSSについてご紹介しました。
今回は、同じく有名どころのBEMについてご紹介したいと思います！

今回も特に言うことないのでさっさと本題に入ります✌(‘ ω ‘)✌

 

BEM(ベム)とは

https://en.bem.info/

Block, Element, Modifierの頭文字を取ってBEMです。
ロシアのYandex社が考案した設計方法です
OOCSSはマルチクラスでクラスをどんどん追加していく手法でしたが
対してBEMはシングルクラスで尚且つ命名規則が厳しいのが特徴です。

タイトルにもなっている通り、BEMの考え方の基本となるのが、Block・Element・Modifierの3つの要素です。
Webページの構成要素をこの3つに分けて、パーツとして使い回しがきくようにすることで
開発スピードとメンテナンス性を上げることを目的として考案されました。

(・３・)<(OOCSSと同じじゃん)
と、思うのはまだはやーい！！
BEMの特徴は分け方と命名規則にあります。
ではまず分け方から見てみましょうね✌(‘ ω ‘)✌

 

Blockとは

まずは「Block」についてです。

https://en.bem.info/methodology/quick-start/#block
A functionally independent page component that can be reused.
機能上独立したページの構成要素で、再利用できるもの
ざっくり訳すとこんな感じです✌(‘ ω ‘)✌

例えば

こういうデザインがあったとしたら

これらがBlockになります。
Blockの中にBlockを配置して入れ子にすることも可能です！

ですが！”機能上独立した”要素である必要があるので
入れ子にしてスタイルを指定することはできないというところが注意点です！
別の場所に移動しても、スタイルが崩れないことが条件になるのです！

 

Elementとは

お次は「Element」についてです。

https://en.bem.info/methodology/quick-start/#element
A composite part of a block that can’t be used separately from it.
Blockの構成要素で、別のBlockに移動すると使えないもの
ざっくり訳すとこんな感じです✌(‘ ω ‘)✌

前項のデザインでいうと

こんな感じ!
各Elementは”gnav”以外のBlockでは使えないので「Block」ではなく「Element」になります！

 

Modifierとは

最後に「Modifier」についてです。

https://en.bem.info/methodology/quick-start/#modifier
An entity that defines the appearance, state, or behavior of a block or element.
BlockやElementの見た目や状態、挙動を定義するもの
ざっくり訳すとこんな感じです✌(‘ ω ‘)✌

例えば

こんな感じで、概ね他の要素と同じだけどちょっとだけ違う要素が必要な時にModifierの出番です！
通常は

こういうクラスの付け方をしているとして、Modifierを使うと

こんな感じになります！Modifierにはkeyとvalueがあって、
↑の例でいうと、「state」は”状態”を指すkey、「current」は”どんな状態か”を表すvalueになります。
さらにポイントとしては、Modifierは見た目や状態、挙動を表すものなので、Modifier単独では使えないです！

 

命名規則がポイント

では一番大事なBEMの命名規則について考えてみます✌(‘ ω ‘)✌
BEMではクラス名を決める際、単語と単語の区切りにセパレーターを使います。
セパレーターは__や_、-などがありますが、どういう時に何を使うのかも決められています！

・Block__Element
BlockとElementは__(アンダースコア2つ)でつなぎます。

・Block_key_value または Element_key_value
BlockもしくはElementとModifierは_(アンダースコア1つ)でつなぎます。

・Block-name_Element-name
BlockやElementの名前が2つ以上の単語からなる時は、単語を-(ハイフン1つ)でつなぎます。

 

まとめ

OOCSSと比べると、命名規則がかなり特徴的ですよね。
わたしもBEMに挑戦してみたことありますが、正直かなり抵抗ありました。
だって、クラス名超長いんだもん。
いくら使い回しが出来るからと言ってもこんななっがいクラス名つけてたら
結局コード書く量はそんなに減らないのでは…？と思ってしまう…(((^-^)))
さて！次回は！CSS設計シリーズ最終回のSMACSSでーす！＼(^o^)／

 

もっと詳しく知りたい方はこちらもどうぞ！

 

【CSS設計】モラルとプライドとCSS -基礎編-
https://adluckdesign.com/ad_blog/24344/

【CSS設計】モラルとプライドとCSS -OOCSS編-
https://adluckdesign.com/ad_blog/24725/

【HTML5】articleとsectionを正しく使い分けよう！
https://adluckdesign.com/ad_blog/22391/

マテリアルデザインについて知ろう！
https://adluckdesign.com/ad_blog/24338/