BEMをカスタマイズして見やすいCSSのコンポーネント設計を目指す！
公開日: 2015.06.02
最終更新日: 2015.06.01
BEMはよく見ると大変分かりやすい記述方法なのですが
どうにもclass名が気持ち悪い！！
なので、もう流行は過ぎた感がありますがBEM思想を元にした
CSSのコンポーネント設計を考えていきたいと思います。
そもそもBEMって？
B(Block)E(Element)M(Modifier)の略で、BEM(ベム)と呼びます。
Block → 塊
Element ⇒ 要素
Modifier ⇒ 状態
今回はBEMについての概念さえ理解していれば、
大丈夫だと思うので詳しい説明は割愛します。
詳しくは下記参考サイトなどを見てください。
http://5log.jp/blog/css_375/
http://dskd.jp/archives/34.html
じゃあCSSのコンポーネントって！？
CSSのコンポーネントとは完全に独立したスタイルの集合体のことです。
他の要素と密に絡んでいると、例えばある要素を移動させたらレイアウトが崩れた！
という場合がありますよね？
ですが、コンポーネント設計をすることで後からclassが追加されても
バッティングが起こりにくくCSSが破綻しないというメリットがあります。
LPなどでは効果はあまり感じられませんが規模が大きくなるにつれて
効果を実感出来ると思います。
ただ、あまりコンポーネントにすることを最初から意識しすぎると
スピードが落ちてしまうので加減が必要です。
加減は経験によってカバー出来るので、
大規模案件でなくとも日頃から設計についてを意識することが大事だと思います。
詳しくは下記参考サイトなどを見てください。
http://qiita.com/usako/items/de252b7f7e43e5161fcb
http://terkel.jp/archives/2014/12/css-components/
http://gihyo.jp/dev/serial/01/cyberagent/0045
これらを踏まえた上であれこれ考えてみる
<div class=”box”>
<h1 class=”box-title”>タイトル</h1>
<ul class=”box-list”>
<li class=”box-list__item”>テスト</li>
<li class=”box-list__item box-list__item–active”>テスト</li>
</ul>
</div>
上記はBEMで書いた例です。
分かりやすいのですがやはり(__)とか(–)に違和感を感じます。
なので、この命名規則を色々といじります！
・BlockとElementの繋ぎの(__)を(_)に
・Modifier部分を(-)から始まる単独のclass名に変更
・BlockやElementを2つ以上の単語で表す時はキャメルケースに。(-)でもあり。
文章だと何とも言えませんね・・。
分かりにくいので再びコードで！
<div class=”box”>
<h1 class=”boxTitle”>タイトル</h1>
<ul class=”boxList”>
<li class=”boxList_item”>テスト</li>
<li class=”boxList_item -active”>テスト</li>
</ul>
</div>
結構スッキリしたのではないかと思います！
個人的にお気に入りなのがModifier部分の単独クラスです。
Modifier部分の記述が毎回冗長になりがちで嫌気がさしていましたが
思い切って単独クラスに変更すると意外と見やすいかも・・と感じました。
見慣れないとこちらも違和感がありますが短いので自分ルールでOKにしました笑。
Modifier部分の新ルールについて
・単独では用いず、必ずBlockとElementと組み合わせる
・汎用的なModifierであれば接頭語に(is-)を付ける
先ほどのModifier部分の単独クラスの更に詳しい説明です。
例えば、下記コードを「.boxの中身の色をサイト内共通の注意文と同じ色に変える」としたら
<div class=”box is-caution”>
<h1 class=”boxTitle”>タイトル</h1>
<ul class=”boxList”>
<li class=”boxList_item”>テスト</li>
<li class=”boxList_item -active”>テスト</li>
</ul>
</div>
このようになります。
この記述をすることで、パッと見てどの要素にどれが掛かっているかが
分かりやすいのではないかと思います。
汎用パーツどうしようか問題
更に考えていきます。
よくコーディング時に悩むのが、見出し部分などの繰り返し出てくるパーツのclass名です。
大体、.titleだとかで済ませているのですが折角だし頭に(is-)を付けてみます。
▼適当に汎用で使えそうなclassに(is-)を付けてみます。
・is-title
・is-btn
・is-txt
見慣れないとこちらも違和感がありますが短いので自分ルールでOKとします！
では自分ルールに基づいたコードで書いてみましょう。
<div class=”is-btn -big”>
<a href=””>ボタン</a>
</div>
意外と悪くないですね！
見通しもよく、共通ボタンに(-big)という状態が掛かっているのが人目で分かります。
まとめ
拙い知識でしたがいかがだったでしょうか？
最近常々思うのが大事なのは何事もまずはルールを決めて設計をすること！
BEM思想を元にした俺ルールはその製作者だけでなく、
他の人が後々いじる可能性があることも考慮して
ガイドラインまで用意するのベストだと思います。
これからもCSS設計はブラッシュアップしていきたいですね！
