styled-componentsの好きなところ。

参考にしたコードがStyled-Componentsを採用していたことから、公式ドキュメント（https://styled-components.com/）を読んで書き方を学んだ。

Wappalyzerで使用されているフレームワークを確認すると、海外のサイトでは良く採用されているような印象を受ける。

ただ、TailwindCSSのほうが、create-next-appでも聞かれるくらいなので、個人開発では使用機会が増えているのかも。

TailwindCSSもチートシートを手元に用意しておけば、別ファイルに移動することなくさらっと記述できるので、非常に楽。

はじめてCSSを書いたのがStyled-Components

Javascript、TypeSctiptなどの同一ファイル上に直接書けるのが便利。特に小さなコンポーネントのにCSSをあてる場合なんかにその効果や美徳を感じる。

Presentationalコンポーネントでprops受け取って、さらっとスタイルしてエクスポート、なんてことも非常にやりやすいし、見やすい。

また、特にpropsを配置して動的にスタイリング出来るのが、気持ちが良い。

CSS-in-JSはNext.jsのServer Componentsではサポートされておらず非推奨に・・・

更新されたNext.jsの公式ドキュメントでは「CSS modules」がオススメされていたので書き直してみた。

自分で試しに、Server ComponentsにStyledComponentsで記述してみると、モジュールの中にある「useContext」が引っかかってエラーが発生するのが確認できた。

このサイトでは「CSS modules」を採用

「CSS modules」自体はハンズオンの参考書で仕組みを習ったので書けた。

　しかしまあ、スタイリングを考えるたびに自分は頭を悩ませられる。

　その都度どうしようかと検索していると、頭がヘロヘロになる。

　いずれにせよ、CSSは、とにかく場数を踏んで引き出しを増やさないといけないと感じている。

　デザインの素養も勉強する必要がある。