#背景
BEMで開発すること半年たったので
#BEMとは
- Block(Webサイトを構成するパーツ)
- Element(Blockを構成する要素)
- Modifire(BlockやElementの見た目を変える要素)
命名規則はMindBEMdingがベース
BEM記法
block
block__element
block__element--modifier
block--modifier
block--modifier__element
メリット/デメリットをさらっと書いてみます。
メリット
ソースコードの統一性を保つ
スタイルの汚染を防ぐ
HTML構造が明確になる
再利用・拡張性に優れる
デメリット
開発スピードが遅くなる
支持を得にくい
メリットを享受できるかどうかは、BEMをちゃんと理解しなきゃいけない
#破綻寸前になる前に
ちゃんと「コーディングルール」や「スタイルガイド」といったドキュメントを揃えておく
#BEMで躓いたところ
サムネイルとテキストがあるリストボックスです。
特にmodifierですね。。。
HTML
<div class="box">
<div class="box__thumb">
<img src="" alt="" class="box__thumb-image">
</div>
<div class="box__body">
<div class="box__heading">Blockの見出し</div>
<p class="box__text">テキストテキストテキストテキスト...</p>
</div>
</div>
これを外側と画像部分を角丸にしたいとしたらどうなるか?
HTML
/* bad */
<div class="box box--soft">
<div class="box__thumb">
<img src="" alt="" class="box__thumb-image box__thumb-image--soft">
</div>
<div class="box__body">
<div class="box__heading">Blockの見出し</div>
<p class="box__text">テキストテキストテキストテキスト...</p>
</div>
</div>
<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft { border-radius: 3px; }
</style>
コンポーネントのベースにmodifierを追加し、その1つのmodifierに基づいて各子要素のスタイルを調整する
HTML
/* good */
<div class="box box--soft">
<div class="box__thumb">
<img src="" alt="" class="box__thumb-image">
</div>
<div class="box__body">
<div class="box__heading">Blockの見出し</div>
<p class="box__text">テキストテキストテキストテキスト...</p>
</div>
</div>
<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft .box__thumb-image { border-radius: 3px; }
</style>
まだBEM歴が半年なので躓いたら追記していきます