styled-componentsで脱CSSModules

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

Transcript

1. styled-components で脱CSSModules Meguro.css #5 @ oRo
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. 多段ネスト
15. どう書き替えるか分からない 箇所が結構でてくる... 大規模なCSSほど 構造は複雑になりがち
16. - CSSセレクタの「>」と「&」 - styled-componentsの「attrs」 複雑なCSSの書き換えには この2つがとても重要
17. - 定義済みコンポーネントの拡張 - より動的で拡張的な コンポーネントを作れる - 高階関数、HOCみたいなもの styled-componentsの「attrs」
20. 関数として評価される この関数の中でオブジェクトを返却する
21. 返却されたオブジェクトがそのまま テンプレートリテラルの中に渡ってくる
23. - & : 親セレクタへの参照 - ＞: 子セレクタのみの適用 CSSセレクタの「&」と「>」 これ以外にも「~」や「+」があります ※ &は正確にはシンタックスシュガー
26. ul, ol, li要素共通のスタイル 定義をここでしている
27. olの中のli要素の中で 更に入れ子になっている olリストのスタイリング ulの中のli要素の中で 更に入れ子になっている ulリストのスタイリング
28. 理想はこんな感じ propsで振舞いを変 更する方が直感的で 分かりやすい こちらの方が Reactらしさがある
29. まとめ - styled-componentsの表現力は sassやscssにも劣らない - 大規模なcssを一度に書き換えるのは難しい - 制御構文の書き換えにはattrs - 複雑なcssの書き換えにはセレクター セレクターはprops制御に書き換えよう！ -
30. ご静聴ありがとうございました！