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度目、僕です。