CSSの技術選定におけるベストプラクティスが見つかっていない

[Yuisei-Maruyama]

CSS Modulesのまま書き進めるか、CSS in JSに置き換えるのかを模索している状態。
メリット、デメリットを洗い出す。

[Yuisei-Maruyama]

CSSの記述方法には下記の2点が挙げられる。

• Scss + CSS Modules : .scss をコンポーネントから import して使うことで scoped なスタイルとして使える手法

  • メリット: .scss をコンポーネントから import して使うことで scoped なスタイルとして使えること、既存の知識で運用できる

  • デメリット: スタイリングをするためにファイルを跨いで開発する必要がある。メンテナンスオンリーな状態にもあり、将来的に deprecate とされる可能性もある。

• CSS in JS : その名のとおり JavaScript の中で CSS を書く手法。

  • メリット: JavaScript の中で CSS を書けるので、.tsx で完結できる。

  • デメリット: styled なラッパーコンポーネントが多く定義され、コードの可読性が低下する懸念がある。

[Yuisei-Maruyama]

MUIが CSS in JSを採用しており、styled-componentsはMUIと親和性があり、かつ 多くの大手企業が採用しているので選定に説得力があり、キャッチアップとして良さそうに思えた。

https://mui.com/material-ui/guides/interoperability/#styled-components