Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

WebデザインからCSS設計について考える その0004 BEMについて少し考えてみる

参考にさせて頂いたページ

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 (--).

命名規則以外のこと

BEMはCSSのクラス命名規則以外のことにも触れています。

例えば以下のような「ビルドする前の素材を格納するディレクトリ構造から、ビルドまでの手法」について触れています。

  • 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をもとに、新しくチームに加わる仲間や後任者への引き継ぎがなるべく簡単になるようにまとめられたら良いなと思います。