CSS in JS メリット・デメリット
フロント開発を行う上で悩ましいことの一つに「スタイリングをどのように行うか」というのが挙げられると思います。
React を用いた開発におけるスタイリングの手法では、CSS Modules と styled components が 2 強状態となっているのですが。
CSS in JS についてと、個人的な考え方をダラダラーっと書いていこうと思います。
CSS in JS とは
アメリカの Wikipedia に記述がありました。
CSS-in-JS is a styling technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a style element) and attached into the DOM. It allows to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way.
CSS-in-JSは、JavaScriptを使用してコンポーネントのスタイルを設定するスタイル設定手法です。このJavaScriptが解析されると、CSSが生成され（通常は style 要素として）、DOMにアタッチされます。 JavaScriptを使用して宣言的で保守可能な方法でスタイルを記述することにより、CSSをコンポーネントレベル自体に抽象化できます。
ということみたいです。
CSS in JS のメリット
breforeやafterに動的に値が設定可能になる- コンポーネントレベルにおけるスタイリングが強制される
- ロジック側と値が共有可能になる
どれも強いメリットかなーと思います。
CSS in JS のデメリット
- ロジック側との境界が曖昧になる
- コードが属人化しやすくなる
- オーバースペックになりがち
全体的に曖昧な表現ですが、こんなものかなーと。
個人的な意見
個人的には CSS in JS って不要かなーと思うことが多いです、styled-components よりは CSS Modules のほうが好きですね。
確かに CSS in JS って「全部 JavaScript に集約しちゃえば楽だよね」という、すごく合理的な考え方で成り立っているとは思うのですが。
一方で使いこなすのは結構難しいです、特に保守難易度が高いかなーと感じることが多いです。
CSS Modules を使用すると CSS ならではの制約が多く、styled-components と比べると自由度が下がるのですが。
自由度が低いということは、逆に考えればそれだけルールが整っているというわけです。
小規模なプロジェクトであれば CSS in Modules でザクッと作ってしまって何ら問題ないのですが。
中規模以上のプロジェクトとなってくるとコンポーネントの粒度をしっかりと考える必要が出てきますが、果たしてどれだけのプロジェクトがそこまで考えることが可能なのか、大きく疑問ではあります。
また自分は普段 CSS Modules で開発を行うことがほとんどですが、正直困ることってほとんどないです。
結論
きちんとコンポーネント設計が行われており、コンポーネントやスタイリング周りのルールが整備されているなら導入は問題ないと思います。
ただ自分の経験上 CSS Modules で開発したところで何も不都合はないので、CSS in JS って導入するほどのものでもないかなと。
styled components を扱えるほど技術力を持っていないのであれば、おとなしく CSS Modules を使いなさい、と言いたくなることは多いです。
CSS in JS 自体は何ら難しい考え方ではないのですが、どこのプロジェクトもコンポーネント設計を甘く見ているがゆえに開発がスムーズに行えていない印象があります。
コンポーネント設計が甘くなるのは、どちらかといえば UI / UX デザイナーの技術力不足であったり、そもそも会社の体制に問題があるケースのほうが多い気はしますが…。
とはいえフロントエンドディベロッパーがコンポーネント設計の知識を持つことは決して悪いことではありません、本来はむしろ良いことずくめなはずで。
CSS in JS を用いるにせよ何にせよ、コンポーネント設計がしっかりすれば「どっちでも良いや」という結論に至るのかなーと。