デザインコンポーネントの命名規則にBEMを取り入れる

2023年12月12日 10:31

こんにちは、ソーシャル経済メディア「NewsPicks」の吉川（よっしー）です。
この記事は NewsPicks アドベントカレンダー 2023 の12日目の記事です。昨日はtakehiloさんによる『TCAでGithubリポジトリ検索アプリを作ってみよう』でした！

前回、ダークモード対応のカラートークンについてまとめました。

今回のnoteのテーマは「コンポーネントの命名規則」です。コンポーネントを作るたびに地味に悩む命名に向き合ってみました。

「デザインデータの命名規則を決めたいけど考える時間がない」「実装との共通化は後回しで、整理しやすい構造にしておきたい」と考えている方に、参考の一つになれば幸いです。

BEMとは

BEM（Block-Element-Modifier）は、ウェブ開発においてコードの構造化と保守性を向上させるために広く使用されている命名規則です。

Block（塊）：Page内で再利用される独立したコンポーネントや要素のこと。例: Header, Button, Navigation
Element（要素）：Blockに依存する部分要素。Block内で独立して存在できる。例: Logo, Title, Icon
Modifier（変種）：BlockやElementの外観や挙動を変更するためのクラス。例: Large, Active, Primary

{Block}{Element}{Modifier} の組み合わせでCSSでは以下のように表現されます。BlockとElementは __ で、ElementとModifierは--で区切られます。

.header__logo—light{}
.header__NavItem--Active{}
.button__Icon{}
.button--primary{}
.form__Input{}
.form__label{}
.form__button--submit{}
.modal{}
.modal_body{}
.modal__close-button{}

AtomicDesignを組み合わせる

記述の手法には他にもありますが、BEMはAtomicDesignの考えに近い点で、すぐに取り入れることが可能でした。「Block(要素の集合体) = Molecules(分子)」「Element(要素) = Atoms(原子)」と考えるとイメージしやすいと思います。コンポーネントを中心に内部要素やパターンが展開されるため、各コンポーネントが独立しており他のコンポーネントに影響を与えにくい構造を持ちます。

ちなみに画面中心の命名にした場合、画面単位でコンポーネントを作成せねばならず、横断した使い方がしにくくなります。たとえば、NewsPicksはメディアなので、News、Articlesなどコンテンツ種別で分けると、同じコンポーネントを番組画面で使用しにくくなるといったことが起きます。基本的には画面依存しないようにコンポーネント単位でまとめ、種別はVariantで用意しました。