「何もない」を作る、コンポーネント指向な余白設計 by blackawa

Vueがそうであるように、限定されたスコープのCSSを使ってUIコンポーネントを設計することが世の中の当たり前になってきました。
それを用いてUIコンポーネントを実装する時に必ず突き当たる難題のひとつが「余白」です。
私は、UIコンポーネントの開発時に検討すべき余白設計についてお話します。

余白は、目に見えないがために境界が曖昧ですから、
「このUIはどんなコンポーネントに分割すべきだろうか？」
というような問題に比べて見落とされがちです。
しかし実際に開発を行うとなると
「この余白をどのコンポーネントに実装すべきか？」
「取ることのできる選択肢は何で、それぞれにどんな影響があるのか？」
と悩まされることになります。
そしてひとたび方針を間違えれば、手を入れるたびに複雑化していくUIコンポーネントが出来上がってしまいます。
にもかかわらず余白設計の問題について語られる機会はそう多くはありません。

今回は、実際に開発と運用を行って得られた「何もない」を作るための余白設計の知見を共有します。