参考にさせて頂いたページ
Naming convention / Methodology / BEM
[CSS]BEMの方法論とMindBEMdingという記法 - Qiita
命名規則について
MindBEMdingについて
おそらく下記のような記法がBEMとして広く認知されていると思います。
block-name__element-name--modifier-name
上記のような記法をMindBEMdingというそうです。
公式の命名規則ページについて
公式の記法
Naming convention(命名規則)のページにはBEMの記法として以下のような記法で説明されています。
- modifierがbooleanの場合
block-name__element-name_modifier-name
- modifierがkey-valueタイプの場合
block-name__element-name_modifier-name_modifier-value
公式で Alternative naming schemes(代替命名スキーム)として紹介されている記法
いくつかの事柄がNaming convention / Methodology / BEMに書かれています。
そのうちの一つには下記のようにMindBEMdingに該当する記法が紹介されています。
Modifiers are delimited by double hyphens (--).
命名規則以外のこと
例えば以下のような「ビルドする前の素材を格納するディレクトリ構造から、ビルドまでの手法」について触れています。
- File system organization (ファイル・システムの編成)
- BEM project building methodology (BEMプロジェクト構築方法論)
blockに紐付くjsの振る舞いや、画像素材の管理も含むようです。
そういう事までBEMでやるのはなんかつらそうに見えます。
まとめ
あらためてBEMについて学習してみました。
やはり広く認知されているMindBEMdingの記法を使用して、modifierはbooleanとかkey-valueであるとか気にせずに、下記のようにするのが良さそうな気がしています。
block-name__element-name--modifier-name
次回のこと
次回はSMACSSとBEMを混ぜ合わせて、CSS設計について考えます。
実際に自分がどのように書いているかなど、実例も踏まえて書けたらいいなと思っています。
今回BEMについて学びました。
大規模なサイトのCSSを長期的に運用していくことを考えると、SMACSSとBEMを混ぜるのが良いと思っています。
広く知られているSMACSSやBEMをもとに、新しくチームに加わる仲間や後任者への引き継ぎがなるべく簡単になるようにまとめられたら良いなと思います。