カラーモード

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

Advent Calendar
BEM

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

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

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

ごく普通のタブUI

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

PSDファイルのレイヤー名にBEMを使った様子

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

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


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