logo
/
Emotionのルール
2022-09-05

使い方

  • css Propを使用する
    • CSSのプロパティとして調べるにしても、過去のアセットをコピペするにしてもObject Stylesだとしんどい
    • styled componentsは使用しない
      • スタイリングのためだけのコンポーネントが増えすぎる
      • ファイルとして分けたコンポーネントと、コンポーネントの中でローカルに(?)増えていくコンポーネントが対応しなくて管理がつらい
  • reset cssなど全体に渡るものはGlobalに指定しておく
  • 色、フォントサイズ、グリッドのサイズは定数で指定する
  • アニメーションは極力keyframesを利用してCSSアニメーションで実装
    • アニメーション用のライブラリを使った方が短期的には楽かもしれないけど、ライブラリの選定自体が難しかったり後から使いづらくなると修正が難しくなったりするので自分で書くのを前提とする
    • JSを使ってアニメーションをするとレンダリングブロックの原因にもなる

参考