CSSコーディングの新しい概念 BEMなる考え方について

Pocket
[`evernote` not found]

ふと、調べものをしていたら、海の向こう側では「BEM」なる考え方が流行っているようですので、少し調べてみました。

BEMとは

CSSなどを記述する時の考え方の一つで、クラス名に意味を持たせて、識別性や独立性を高めてくれます。

具体的には

Block:上部階層の構成物、固まり
Element:Blockの下部要素、Blockを構成する要素
Modifier:BlockやElementのバージョン違い

の略になっています。

具体的には、コーディングするページを小さな部品(block)に分解して、さらにそのブロックを小さな要素(elemnt)に分解します。
それぞれに固有のクラスを付けて管理しますが、その時にblock-elemetの親子関係がわかるように

<div class="header">
 <div class="header--left">
  <img src="logo.jpg">
 </div>
 <div class="header--right">
  <ul class="header--navi">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
  </ul>
 </div>
</div>

block–elementというように書きます。

つまり、boxとかblueTextとか中途半端な命名はだめってことですね。

記述のルール

ここでハイフンが2重になっているのに注目してください。
ハイフンの使い方にルールを付けていて
一つのハイフンは、同一の単語の可読性を高めるために使用します。
例)afternoon-tea

二つのハイフンは、blockとelement、Modifierを区別するために使用します。
例)header–right

詳しくは、こちらのサイトに載っていますので、ご覧いただけばいいかと思います。
http://bem.info/

感想というかまとめ

意訳をしながら読んでみて、なるほどなぁと思いました。
依然、ブログでも書きましたが、破綻しにくいCSSの設計ってコーディングする人間にとって、永遠の悩みです。
ガチガチにルールを決めれば破綻しずらくなるのかもしれませんが、逆に自由度が損なわれて迅速なコーディングができない・・・といった矛盾が発生してしまったりしています。

BEMは、概念的な事だと思いますので、比較的導入しやすいと思いますし、何よりコードの可読性、意味付けが簡単できること、そしてBEMを導入するには、きちんとデザインを咀嚼して、考えながらコーディングしなければならいということに大きな意味があると思います。

個人的にいつも反省しているのが、時間に追われて、とりあえずやっちゃえ的に作業していて、その場しのぎのコーディングが結構あるということです。
小規模サイトで、作りっぱなしだったら、それでもいいかもしれませんが、後々で複数人によってメンテナンスをするような場合は、ダメです。

OOCSSなんかにも通じる考え方だと思います。
基本、クラスだけで記述していくので、メンテナンス性だけじゃなく、パフォーマンス的にもメリットがありそうですね。

ただ、しっかり設計しながらコーディングしないとコード量が肥大してしまう可能性はありますけど・・・

もう少し詳しく勉強して、社内でも導入できるようにまとめて行きたいと思います。

Follow me!

Pocket
[`evernote` not found]

カテゴリーcss

コメントは受け付けていません。