BEMが思いのほか難しいって話

ボクにプログラミングを教えてくれた超頭の良かった師匠は言いました。
ープログラミングで一番悩むのは関数名であるーと。

目次！

ある機能に「名札」を付ける作業というのは、
コーディングの中において、最もコミュニケーション性のあるタスクです。

ふと気を抜くと、その時思いついた名前を付けてしまいがちなのですが、
適当な名前を付けてしまうと数週間、下手したら数日経過した自分にとってすら
難解なコードが出来上がっている…
なんてことも少なくありません。

命名規則の目的は、
果たすべき機能の塊に対して、その機能を円滑に伝達する
ことであり、その伝達性が高いと読みやすい、メンテナンスしやすいコードである可能性が高くなります。

CSSにおいても、命名規則は重要であり、最も知られた命名規則の一つに
BEM（Block-Element-Modifier）があります。

ざっくり簡単に説明すると、
クラス名を
BLOCK：パーツの名前
ELEMENT：パーツの構成要素の名前
MODFIRE：要素に対するタグ付け
に分けることで、プラモデルのように、組み立てていこうという命名規則です。

説明は下記がわかりやすかったのでご興味がある方はぜひ

このBEM、実際にやってみると名前の付け方にかなり頭を使います。
実装前にデザインを見ながらこのパーツはどういった要素に分類できるのかを否応なく考えるようになります。

最初のころ（といってもつい最近）はパーツの中にパーツがあって、その中にパーツが…なんて闇の深いネストが出来上がっていたのですが。

下記の記事を参考にしつつすこーしずつBEMの勘所をつかみ始めています。

僕個人としては連結要素を"-"や"_"を２つ用いるという点で「汚い」という根拠のない嫌悪感を抱いているので、いまはそれぞれ１つだけに改造して使っています。
ブロック名で2単語使いたいときはキャメルケースで命名してます。

統一され、共有された命名規則はBEMしか使っていないので、相対的な評価はできませんが、少なくと要素の機能を一意に伝えようと思考する時間は増えました。

hiramas’s blog