styled-componentsで脱CSSModules

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

styled-components < >

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

さぁ移行するぞ！！！

Slide 9

Slide 9 text

定数

Slide 10

Slide 10 text

擬似クラス

Slide 11

Slide 11 text

継承

Slide 12

Slide 12 text

for文

Slide 13

Slide 13 text

多段ネスト

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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