2020-08-08
やること宣言
gaaamii.icon
勉強中メモ
gaaamii.icon
まず雑にいろんな記事を読んでみる
なるほど。styled-componentsみたいにスタイルをコンポーネントにするのはどうなんだろうという気持ちがあったので共感できる。emotionのcss propよさそう。 書き出しのここが気になった。しかしながら、CSSのすべての機能がサポートされているわけではありません。
ちょっとReactのドキュメントを見てみようかな。
というか疑似要素にスタイル当てられんから、それのことかな。あとメディクエリとかもstyleプロパティじゃ書けないしな。
特に、どこまでサポートされているかという記述はないけど、推奨されていないことははっきりと書かれている。
style 属性を要素のスタイリングの主要な手段として使うことは一般的に推奨されません。
なぜ?
パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりも優れています。
これをもう少し掘り下げておきたい。なぜCSSクラスを使うほうが優れているのか。
高速なパフォーマンスが求められるアニメーションやインタラクションなどの場合には、DOM要素のCSSプロパティを直接変更する方法を検討するべきです。
スタイルシートのファイルに分けることで、分けてキャッシュできる。
class属性を使ったほうが速いという結果。
単に style プロパティをいじくるのと何が違うのか?
styleプロパティをいじくるのは以下の問題がありそう
(スタイルシートファイルを作るのに比べて)キャッシュを分けられない
疑似要素にスタイルを与えられない
メディアクエリが使えない
パフォーマンスに問題が起きる(なぜかはわからないけど)
どういう経緯でできたものか
仕組み
各ライブラリの比較
最も軽いのは?
最も支持されていそうなのは?
最もドキュメントが充実していそうなのは?
最もTypeScriptとの相性が良さそうなのは?
やったこと
gaaamii.icon