Vue.js がそうであるように、限定されたスコープの CSS を使って UI コンポーネントを設計することが世の中の当たり前になってきました。それを用いて UI コンポーネントを実装する時に必ず突き当たる難題のひとつが「余白」です。本セッションでは、UI コンポーネントの開発時に検討すべき余白設計についてお話しします。 余白は、目に見えないがために境界が曖昧ですから、「この UI はどんなコンポーネントに分割すべきだろうか?」という目に見える問題に比べて見落とされがちです。しかし実際に開発を行うとなると、「この余白をどのコンポーネントに実装すべきか?」、「取ることのできる選択肢は何で、それぞれにどんな影響があるのか?」と悩むことになります。 そしてひとたび方針を間違えれば、手を入れるたびに複雑化していく UI コンポーネントができ上がってしまいます。にもかかわらず余白設計の問題について語
![“何もない” を作る、コンポーネント指向な余白設計(黒川 智) | Vue Fes Japan 2019](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b373323f42761665cf40c10dcb8abf01f27356a/height=288;version=1;width=512/https%3A%2F%2Fvuefes.jp%2F2019%2Fsession-og-images%2Fblackawa.jpg)