styled-componentsで脱CSSModules

 styled-componentsで脱CSSModules

Meguro.css #5 @ oRo での登壇資料です

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

March 06, 2019
Tweet

Transcript

  1. styled-components で脱CSSModules Meguro.css #5 @ oRo

  2. None
  3. CSSModules(CSS, SASS, SCSS) のメンテナンスに 消耗していませんか?

  4. 消耗ポイント !important 変更したら他の箇所が崩れた webpackェ... 前書いたCSSがわからないぞ

  5. CSSModulesはCSSの辛さを そのまま引き継ぐ CSSも全てJSで管理したい!! >

  6. styled-components < >

  7. styled-componentsの特徴 - 普通のCSSと同じ記法 - 擬似要素、擬似クラスなどの セレクタをほぼサポート - スタイリングの継承(mixin) - Propsで見た目を制御

  8. さぁ移行するぞ!!!

  9. 定数

  10. 擬似クラス

  11. 継承

  12. for文

  13. 多段ネスト

  14. None
  15. どう書き替えるか分からない 箇所が結構でてくる... 大規模なCSSほど 構造は複雑になりがち

  16. - CSSセレクタの「>」と「&」 - styled-componentsの「attrs」 複雑なCSSの書き換えには この2つがとても重要

  17. - 定義済みコンポーネントの拡張 - より動的で拡張的な コンポーネントを作れる - 高階関数、HOCみたいなもの styled-componentsの「attrs」

  18. None
  19. None
  20. 関数として評価される この関数の中でオブジェクトを返却する

  21. 返却されたオブジェクトがそのまま テンプレートリテラルの中に渡ってくる

  22. None
  23. - & : 親セレクタへの参照 - >: 子セレクタのみの適用 CSSセレクタの「&」と「>」 これ以外にも「~」や「+」があります ※

    &は正確にはシンタックスシュガー
  24. None
  25. None
  26. ul, ol, li要素共通のスタイル 定義をここでしている

  27. olの中のli要素の中で 更に入れ子になっている olリストのスタイリング ulの中のli要素の中で 更に入れ子になっている ulリストのスタイリング

  28. 理想はこんな感じ propsで振舞いを変 更する方が直感的で 分かりやすい こちらの方が Reactらしさがある

  29. まとめ - styled-componentsの表現力は sassやscssにも劣らない - 大規模なcssを一度に書き換えるのは難しい - 制御構文の書き換えにはattrs - 複雑なcssの書き換えにはセレクター

    セレクターはprops制御に書き換えよう! -
  30. ご静聴ありがとうございました!