ReactやAngular、VueのコンポーネントとCSSの関係

[tacamy]

よく、CSSのコンポーネントの粒度とJSのフレームワークのコンポーネントの粒度が違うから、CSSは別ファイルで今までどおりBEMとか使ってCSS設計する、みたいな話をよく聞くけど、本当にそうなのかなと最近悩ましいです。

たとえば、material-uiでは、コンポーネント自体にCSSも含まれていて、使う側としては使いたいコンポーネントをただimportするだけで見た目も動きも全部がセットになっていて使いやすいなと思いました。 スタイルを調整したいときは、コンポーネントを使うときにスタイルを上書きできるように作られているので、同じ機能だけど似たような見た目でチョット違うみたいなことにも対応できるし。

擬似的にでもJSのコンポーネントの単位でCSSのScopeを作れるのであれば、そもそもCSSの設計とかあんまり必要性を感じないような気もしていて。

また、JSのコンポーネントにCSSも含まれていれば、コンポーネント自体が不要になったときに、コンポーネントを捨てるだけで不要なスタイルが残ることもないし、「捨てやすい」構造にもなるのかなと。

とはいえ、私はReactでインラインでスタイルを書くか、Vueでコンポーネント単位でstyleにscopedつけてつくるかしかしたことがないので、他のフレームワークではどうなのかとか、ReactでもCSSをインラインで書かない場合はどうなのかとか、いろいろな意見を聞きたいです。

[usagi-f]

ほぼ同じ疑問を持っています。

私は逆にCSS in JSに疑問を感じていて、 CSSもコンポーネントに含まれていた場合、UIの扱いはとても便利なのですが

• ビルド時に依存するもの（*-loader）の増加
• SSRが必要なときにとても複雑になる（isomophic-style-loaderはアリなのか？）
• アクセシビリティ観点での問題
• 自動的に