PSDファイルのレイヤー名でBEM

BEM Advent Calendar 2013 24日目のエントリです。

BEMはセレクタの命名規則だけでなく、 ファイルシステムの管理にも導入できますよというbem.infoのページを見ていて、MindBEMdingな名前付けは何もウェブだけのものに留まらなくていいんじゃないかと思うようになりました。そこでタイトルにあるように、PSDファイルのレイヤー名でBEMです。

何回か前の記事で紹介したこちらの画像の、

汎用的なタブの例

PSDファイルをこんな感じにしてみました。

レイヤー名でBEMったスクリーンショット

冗長になるのでBlockとElementの継承は省略してModifierを書いています。レイヤー名でBEMと言いましたが、このような単純なイラストでもレイヤー単位ではHTML化できないところが出てくるので、グループにしてそこでBEMな名前付けをしています。

用意したサンプルが単純な作りなのでBEMなレイヤー名を一概に「良い」とは言えません。ですが「◯◯のコピー」が大量に生まれたりして見通しも悪くなりがちなレイヤー名を、Block, Element, Modifierに基づいたグループツリーで表現しておくことで、他のメンバーにデータを渡す時にもその全容を把握してもらいやすくなるのではないでしょうか。


25日目は1日ぶり8度目、僕です。