複数のCSS in JSなUIコンポーネントライブラリを入れる時の勘所

• 複数UIライブラリを入れると嬉しいケースよくある
  • メインのライブラリに足りないコンポーネントをサブのライブラリでトッピングする
  • メインにしてたライブラリが更新されなくたりしてて乗り換えたい時
    • CSSの時代はもうフルリニューアルしかなかったり
• えっ、そんなことしたら競合するじゃないか！
  • styled-componentsやEmotionなどCSS in JSをベースにしたライブラリなら起きない！
    • （起きることもある。後述）
  • ReactNativeとかそもそもCSSが無い世界ならstyleとしては競合しない
    • （名前空間の衝突はある。後述）

Tips: ResetCSSを切る

• 案外コンポーネントライブラリでもresetCSSを含んでいるケースがある
  • なので片方を切るか、片方に合わせるとかするしかない
• メインは片方定めつつサブを補助として利用するなどが賢明な判断に
  • 移行の方法は結構むずいかもしれない・・・
  • ResetCSSがほぼ同じようなケースであれば可能そう
    • 移行ならリグレッションテスト時に２つのresetCSS切り替えたバージョンにするとかはあるかも？

Tips: TypeScriptは絶対入れる

• 複数かどうかに関わらずではあるが、UIコンポーネントで型なしはかなり辛くなるし、まして複数ライブラリを取り扱うなど正気ではなくなる

Tips: コンポーネントはなるべく細かめにファイルを分けて、同名コンポーネントの名前重複を避ける

• TextとかBoxとかだいたいどのコンポーネントも同じ名前で定義してる
• 同じコンポーネント内で複数のUIコンポーネントを使う時、同名だと重複して困る
• import {Text as AText } from "a-ui-lib"みたいな避け方はあるがわりとめんどい
• なので、そもそも複数コンポーネントが同一ファイルで重複しないような単位で分けておくほうが楽になる

Tips: atomicのような細かい共通コンポーネントを作るのはあんまり意味薄かったりする

• 移行に関して
• atomicみたいな単位の小さいコンポーネントは便利
• しかし複数UIを入れて移行する際は、案外利用箇所が多すぎて怖くて置き換えしづらいみたいなのがある