styled-componentsで脱CSSModules

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

CSSModules(CSS, SASS, SCSS) のメンテナンスに消耗していませんか？

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

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

styled-components < >

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

さぁ移行するぞ！！！

定数

擬似クラス

継承

for文

多段ネスト

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

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

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

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

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

- & : 親セレクタへの参照 - ＞: 子セレクタのみの適用 CSSセレクタの「&」と「>」これ以外にも「~」や「+」があります ※
&は正確にはシンタックスシュガー

ul, ol, li要素共通のスタイル定義をここでしている

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

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

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

ご静聴ありがとうございました！

styled-componentsで脱CSSModules

styled-componentsで脱CSSModules

camcam_lemon

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript