デザインコンポーネントの命名規則にBEMを取り入れる
こんにちは、ソーシャル経済メディア「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で用意しました。
一方、画面単位で仕様を変える可能性を残しておくため、使用範囲の制約をつけるために、あえて画面名をつける場合があります。この判断はデザインや開発指針によるものなので、必要に合わせてご検討ください。
言葉を修正する
よりイメージしやすい表現や聞き馴染みのある言葉にチューニングして「CEV（Component-Element-Variant）」としました。
Blockは、BEMの中の概念表現としての言葉で、基本的にはComponentと同じものを指すため「Component」と言い換えます。
Modifierは、BEMの考え方の中では同じ要素が異なる状態やバリエーションを表現するのに対し、Figmaのパターン管理では形状が異なるものも同じコンポーネント内でプロパティの一つとして扱っており、少しイメージが違いました。そこで「Variant」と言い換えます。
使用例
(C)NavigationBar / (E)SearchForm / (V)Selected
(C)FeedSection / (V)Original
(C)FeedSection / (E)Title / (V)L
(C)Overview / (V)OnAir
(C)FeedCard / (E)Comment / (V)Pro
(C)Dialog / (E)Image / (V)Login
表記ルール
次に細部の揺れを防ぐために、単語の表記の仕方を揃えていきます。
表記は「アッパーキャメルケース」
（例: SectionSearchDefault など単語の頭文字を大文字にする）すべての単語は「単数」
アイコンは複数のコンテクストで使用されるため「物体の総称名」
（例: 鉛筆のアイコンはEditではなくPen）Figmaのプロパティ名表記は「英語」
プロパティ名を都度手入力すると揺れやすいため、リストからコピペして使用します。
まとめ
UIデザインのコンポーネント名の設計思想や表記ルールについてまとめました。今回はデザイン観点の整理を優先しています。WebのデザインデータはStorybookと揃えて、アプリはOSごとの構造を考慮する必要があるかと思います。デザインに反映しつつ、最適解を見つけていきたいと思います。
告知
NewsPicks ではデザイナー・エンジニアを募集中です！ ご興味のある方はこちらまで。
今回の記事がおもしろいと思ったら NewsPicks アドベントカレンダーの他の記事も見てみてくださいね。
明日はchouxcreamsさんが書いてくれます。お楽しみに！
参考にした記事
いいなと思ったら応援しよう！
