CSS in JS ライブラリ「emotion」で、Atomic Design風なコンポーネントを作ってみる - Qiita

はじめに emotion は、パフォーマンス良くスタイルを構築する事を念頭に設計された CSS-in-JSライブラリです。 emotion の使い方を少し体験すると同時に、コンポーネントごとに適用するにはどう書いていくかを探るために、 Atomic Design のカードの例を参考に、サンプルアプリケーションを作成しました。 この記事は、そのサンプルアプリケーション作成にあたって、現時点で気になったポイントや迷いがあるポイントなどを記載しています。 書き方は色々あると思いますが、 styled の書き方がしっくりきたので、それを使って書いています。 サンプルアプリケーション コードも含めて以下に置いています。 Next.jsのSandboxをベースに書いています。 Atoms Atoms は、「もっとも基本的な要素」で、それ以上分解することができないものなので、 HTMLタグ1つで表現でき