現在開発してるReactアプリでのCSS指定方法で悩みました。ReactではJSXという形でHTMLを取り込みましたが、Webページを構成するもう1つの要素であるCSSは取り込んでいません。VueではコンポーネントにCSSを書く場所や書き方が決まっているのでCSSの扱いで困ることはないかもしれません。
今回の選択肢
ReactでのCSSの扱い方にはいろいろな方法があります。
- CSSモジュール
- 従来のHTML/CSSのようにCSSファイルを用意し
className属性でCSSを適用します
- 従来のHTML/CSSのようにCSSファイルを用意し
- インラインスタイル
style属性でCSSをHTML要素に直接指定する方法です- ただし、値は文字列ではなくJavaScriptのオブジェクトで指定します
- Bootstapのユーティリティーclass
- 今回のアプリではCSSフレームワークとしてReact Bootstrapを使う事になり、BootstrapのUtilitiesにあるSizeやSpacingなどのクラスも使えます
- styled-component
- 現在一番使われているライブラリーでCSSを文字列で書き、それを適応したコンポーネントを定義できます
- その他ライブラリー
- styled-componentと似たようなライブラリーは複数あり、Emotionが人気上昇中のようです
私的なコメント
CSSモジュールはCSSが別ファイルになるので好きではありません。
インラインスタイルはstyle属性の値がHTMLでは文字列ですがJSXではオブジェクトで、プロパティ名がJavaScriptのルールにあわせキャメルケースです。
HTMLでは <p style="font-size: 1.5rem">Title</p>と書くところが、
Reactでは <p style={{fontSize: "1.5rem"}}>Title</p>のように書かないといけません。
font-size → fontSizeの変換が微妙に面倒です😅
Bootstapのユーティリティーclassを使うとcalssName='mt-1 p-0'のように書くとmargin-top: 1rem; padding: 0;を指定した事になり便利です。ただし詳細なCSS指定には使えないので、コンポーネントの大きさや隙間などレイアウトでしか使えません。
styled-componentは現在一番使われていると思われますが、<p style="font-size: 1.5rem;">Title</p>のようなシンプルな指定でも面倒な記述が必要です😅
const LargeText = styled.p`
font-size: 1.5rem;
`;
// ....
<LargeText>Title</LargeText>
Emotionのようなライブラリーもあり、上のケースは
<p css={css`font-size: 1.5rem`}>Title</p>と書けます、しかもstyled-componentのようにCSSを適応したコンポーネント作成もできます。最近人気のようです。
今回の選択
今回のアプリでは以下の2つのみ使う事にしました。インラインスタイルはちょっとしたCSS指定では便利なのですが、コードをメンテして行くと大抵CSSは増えるので今回は使わない事にしました。
- 3.Bootstapのユーティリティーclass ： 主にレイアウトで利用、当然Bootstapのコンポーネントと相性が良いです
- 4.styled-component ： その他のCSS指定にはstyled-componentを使います、コードが増えますが、Emotionには置き換える勇気はありませんでした
おまけ
VS Codeのstyled-component用のExtentionを入れたのですが、入力補完が出来ず困りました。🥺
よくよく調べるとvscode-styled-componentsという名前のExtentionが6個（完全一致は4個）もあり、間違って入力補完のないExtentionをインストールしていました。皆さんはきをつけてください。
