はじめに
こんにちは。
CSS設計の本をよんでいたところ、コンポーネントの設計にも役立ちそうだったのでアウトプット用でまとめます。
最近のフロントエンドはReactやVueをはじめとしたJavaScriptライブラリの登場により従来のCSS設計(BEM, FLOCSSなど)を使う機会が減ってきています。
ただしこれらのCSS設計が目指したものはいずれも「抽象化」や「コンテキスト」との分離であり、UIをいかに「再利用可能にするか」という点で最新のコンポーネント設計にもこの考え方は役立ちそうです。
逆に最新の技術を用いてもクラスないしはコンポーネントの設計からは逃れられないということですね。。。泣
命名の重要なところ
具体と抽象の中間の汎用性が最も高い部分を狙うのが良いです。
具体的すぎると再利用性が失われますし、抽象的すぎると意味が伝わりません。
と言っても「汎用性が高い命名」を自分で考えるのは大変です。
そこで有名なCSSフレームワークであるbootstrapやMaterialUIなどでよく使われるコンポーネントを指針とし、「汎用性」の理解を深めます。
コンポーネント(粒度はバラバラ)
Accordion
コンテンツを折りたたむことができるUI
ユーザーがより詳しく欲しいと思う情報を取捨選択できる
Card
画像と内容(タイトル、要約)がトランプのカードのように表示されるUI
スナップ写真により注目を集め、内容を見てもらう効果がある。
Media
画像と内容がが横並びに表示されるUI
Paper
紙の上に浮いてるかのように見えるUI
Carousel
画像やテキストをスライドで表示させるUI
固定範囲の中で複数の情報を表示できる
Menu(Dropdown)
複数のメニュー項目を表示させるUI
Jumbotron
キャッチコピーと背景画像を表示するUI
Toast
ユーザーの操作を妨害しない通知表示UI
WIP
加筆予定
コンポーネント内で頻出のクラス名
- wrapper
- inner
- header
- body
- footer
Tips
スタイルガイド(storybookなど)を使う
コンポーネントを管理するツールです。
スタイルガイドを導入することにより、コンポーネントの再開発防止や把握が容易になります。
また、デザイナーとのコミュニケーションも円滑化できる
bodyの背景色をベースルールで設定する
ユーザーがブラウザの機能を使って背景色を独自設定した場合にWebサイトがバグることを防げる
ボタンにはborderを設定する
ホバー時のborderとの差分を防止する
フォントはrem指定
px表示だと、ブラウザのフォントサイズ変更機能を使っても変更されない
参考