styled components は便利なのか？

考察

この考察は vite、react に styled-components をインストールしてちょっと遊んだ程度の感触を記したものなのでバリバリ使いこなしてそのメリット、デメリットを明確にできている方はそっと閉じていただきたい。

まず、CSS in JS の思考は CSS を JS ソース内に記述しコンパイル後もそれを JS で呼び出し実行するものであり、旧来の style.css をヘッダで呼び出すものではない。

この技術を使うとコンポーネント単位で CSS をあてることができ、className の命名地獄から逃れられるというメリットがある。react ではない純粋な HTML に CSS プロパティをあてる時はそのエレメントにクラスを命名し、包含する要素の最後に style タグを使って記述していた。こうすることで head で呼び出したリセットとデフォルト CSS を汚染することなくコーディングできていた。

コンパイル後の違い

styled-components は CSS in JS なので js ファイル内に CSS が入る。コンパイル後のファイルを見るとテンプレートリテラル内の改行がそのままになるので結構酷い様になっている。これとは別にコンポーネントごとに CSS ファイル切り出し style.css として import したやり方だとグローバルな CSS ファイルの下部に連結して一つのまとまった CSS ファイルへと変換してくれる。

結論

現時点では CSS ファイルを取得するためのネットワークアクセスを一つ減らすことに成功したくらいのメリットしかなく、js ファイルが肥大する上に styled-components が style タグを head タグ内に書き出す点から再描画を起こすというデメリットのほうが大きいように思う。開発者のメリットがユーザーのデメリットに直結するのであればこれは避けるべき行為なのかもしれない。