こんにちは

自作した当ブログでは、Styled-Componentを用いて実装していました。

Styled-Componentは実装の容易さと、コードの可読性の高さが良く、好んで使っていました。

ただ、Styled-Componentも欠点があり、それは実行速度とSSRとの相性の悪さです。

Styled-ComponentはCSS in JSの一種で、CSSファイルではなく、jsファイル内に直接CSSを記載します。

そのため、実行時にCSSへのコンパイルが必要になることから、実行速度上の問題、SSR、SSGとの相性の悪さがあります。

通常のReactでは上記の欠点はそこまで気になる点ではなかったと思いますが、最近のReactフレームワークではSSR、SSGや、速度の点を重視していることから、使いづらさを感じることも多くなってきました。

もちろん、実装する上ではとても便利ではあるのですが...

そこで、当ブログではCSS Modulesを用いることにしました。

CSS Modulesは通常のCSSのように外部CSSファイルに記述する方法ですが、違うのはクラス名が衝突しないように、呼び出し時に一意なクラス名を命名してくれる点です。

参考：CSS Modulesの歴史、現在、これから

この点はStyled-Compoentと同じですね。

これを用いてコンポーネント毎にCSSを定義すれば、クラス名の衝突を回避しつつ、可読性もそこまで下がらずに、通常のCSSの良い点を利用できそうです。

Styled-ComponentからCSS Modulesの移行ですが、Styled-Componentで利用していたCSSをそのまま流用するだけだったので、そこまで面倒ではありませんでした。