ReactプロジェクトにおけるCSSの扱い方について自分の意見をまとめます。
想定読者は、CSSやReactを使ってアプリケーションを作ったことのある方です。
Reactプロジェクトの問題: UI要素の再利用方法が複数存在する
Reactにおいては、UI要素の再利用方法が複数存在する問題がある。
CSSを使ったUI要素の再利用。これは、基本的には一度作ったCSSクラスを様々なHTML要素に付与することである。例えば「Button」クラスを様々な要素に付与して使う。
Reactコンポーネントを作ることによるUI要素の再利用。例えば「Button」コンポーネントを作り、それをいろいろな画面で使う。
この二つの考え方(CSS、React)はどちらも正しい方法だが、混ぜて使うと問題が生じる。ボタンのデザインを再利用するためにCSSクラスを再利用すべきか、コンポーネントを作って再利用すべきか迷いが生じる。書き方が一つに定まらず、実装を遅くする。
どちらの方法が良いか
Reactコンポーネントは、Reactプロジェクトにおいて必ず使うものである。そのため、CSSクラスによる再利用を志向しても必ずReactコンポーネントによる再利用と混ざる。CSSクラスのみに寄せきれない。一方、CSSクラスの再利用を全くせずReactコンポーネントのみを再利用することは可能である。
そのため、Reactコンポーネントを再利用するという方に寄せるのが良いと考える。
tailwindcssによる解決
tailwindcssは、Reactコンポーネントの再利用に寄せる方向でこの問題を解決している。tailwindcssでは、あらかじめ用意されたユーティリティCSSクラスをHTML要素に適用してスタイリングする。スタイリングしたHTML要素を複数の場所で使いたくなった時は、React（やVue）のコンポーネントとして切り出すことによって再利用する。
重要なのはCSSクラスを開発者が書かないことだ。アプリケーションレベルの再利用の単位は必ずReactコンポーネントになり、CSSクラスを自分で書いてそれを再利用することは基本的にしない。これによって、再利用の方法が「Reactコンポーネントとして書く」という一つにまとまり、迷いが生じない。
ただ、tailwindcssを使うかどうかは意見の分かれるところではある。とはいえ、この考え方自体はtailwindcssを使わなくても使える。
結論
tailwindcssの考え方を参考にして、
再利用の単位は常にReactコンポーネントとする。
CSSクラスの再利用は基本的に行わない。
特に、アプリケーション特有のCSSクラスを書いてそれを再利用することには極めて慎重になる。
ただし、ごく一般的なユーティリティCSSクラス（tailwindcssで定義しているような粒度のもの）を定義することは許容される。
コンポーネントの内部においてどのようなCSSソリューションを使うかは自由（素のCSS、BEM、SCSS、CSS-Modules、Styled-component、tailwindcss なんでもよい。自分のプロジェクトの性質に応じて選択する）。
という考え方をとる。
以上
↧