BEM と接頭辞
Posted :
BEM をもとにした名前付けをする際、Block に接頭辞を入れるとより強固になります。接頭辞はバージョンでも、プロジェクト名でも、名前空間として使えるものを何かしら入れておくといいです。例えば、大規模 Web サイトにおける、グローバルヘッダーとよく呼ばれる Block を思い出してみましょう。
すでにある大規模な Web ページをリニューアル、のようなお仕事の際、
- すでにあるコンテンツ領域は古いままを維持
- ただし、旧コンテンツのうち、有用な一部のページはヘッダーとフッターだけは新しいものにリプレースしたい
- 手を付けられない一部のページは旧ヘッダーのまま凍結
という用件があるかもしれません。
そういう時、バージョン名が接頭辞として入っていれば…
<header class="v1-pageHeader">
と
<header class="v2-pageHeader">
は共存できるわけです。
あるいは別の例として、Web サイトのリニューアルで資産として持っている旧コンテンツと、新テンプレートで作られた新コンテンツが混ざり合うとき、同じ役割の Block でも、接頭辞によって異なる世代、かつ同一の役割の Block を混在させることもできます。混在はできれば避けたいものですが、大規模サイトではよくあることです。
例えば、以下のような共存があるかもしれません。
<div class="v1-heading3">
と
<div class="v2-heading3">
こんな場合でも世代を明示しておけば、共存できるわけです。
また、接頭辞はプロジェクト名でもいいでしょう。例えば、何らかのキャンペーンを行うので、クリスマス仕様の装飾をした、グローバルヘッダーを一部のページで使いたい、そんな場合には、
<header class="v1-pageHeader">
と
<header class="xmas2013-pageHeader">
を共存できるわけです。
Block, Element, Modifier の前に、名前空間を付与し、世代単位での管理を行ってみると、フロントエンドのお悩み解決につながるかもしれません。