styled-componentsで脱CSSModules

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. ご静聴ありがとうございました！