Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
styled-componentsで脱CSSModules
camcam_lemon
March 06, 2019
Programming
3
340
styled-componentsで脱CSSModules
Meguro.css #5 @ oRo での登壇資料です
camcam_lemon
March 06, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
lemon
8
3.3k
lemon
2
260
lemon
5
770
lemon
9
1.2k
lemon
5
760
lemon
2
290
lemon
0
190
lemon
0
190
lemon
1
120
Other Decks in Programming
See All in Programming
xrdnk
0
130
nrslib
20
13k
rishitdagli
0
170
daiki1020
0
1.1k
mu2in
0
130
muttsu_623
0
440
asumikan
0
280
yosuke_furukawa
PRO
13
3.6k
yumcyawiz
4
600
mizdra
7
4.7k
nauleyco
0
200
akatsukinewgrad
0
130
Featured
See All Featured
rasmusluckow
318
18k
dougneiner
55
5.4k
bkeepers
408
57k
smashingmag
283
47k
mthomps
39
2.3k
jeffersonlam
328
15k
ddemaree
274
31k
sachag
446
36k
pauljervisheath
196
15k
deanohume
295
27k
cherdarchuk
71
260k
moore
125
21k
Transcript
styled-components で脱CSSModules Meguro.css #5 @ oRo
None
CSSModules(CSS, SASS, SCSS) のメンテナンスに 消耗していませんか?
消耗ポイント !important 変更したら他の箇所が崩れた webpackェ... 前書いたCSSがわからないぞ
CSSModulesはCSSの辛さを そのまま引き継ぐ CSSも全てJSで管理したい!! >
styled-components < >
styled-componentsの特徴 - 普通のCSSと同じ記法 - 擬似要素、擬似クラスなどの セレクタをほぼサポート - スタイリングの継承(mixin) - Propsで見た目を制御
さぁ移行するぞ!!!
定数
擬似クラス
継承
for文
多段ネスト
None
どう書き替えるか分からない 箇所が結構でてくる... 大規模なCSSほど 構造は複雑になりがち
- CSSセレクタの「>」と「&」 - styled-componentsの「attrs」 複雑なCSSの書き換えには この2つがとても重要
- 定義済みコンポーネントの拡張 - より動的で拡張的な コンポーネントを作れる - 高階関数、HOCみたいなもの styled-componentsの「attrs」
None
None
関数として評価される この関数の中でオブジェクトを返却する
返却されたオブジェクトがそのまま テンプレートリテラルの中に渡ってくる
None
- & : 親セレクタへの参照 - >: 子セレクタのみの適用 CSSセレクタの「&」と「>」 これ以外にも「~」や「+」があります ※
&は正確にはシンタックスシュガー
None
None
ul, ol, li要素共通のスタイル 定義をここでしている
olの中のli要素の中で 更に入れ子になっている olリストのスタイリング ulの中のli要素の中で 更に入れ子になっている ulリストのスタイリング
理想はこんな感じ propsで振舞いを変 更する方が直感的で 分かりやすい こちらの方が Reactらしさがある
まとめ - styled-componentsの表現力は sassやscssにも劣らない - 大規模なcssを一度に書き換えるのは難しい - 制御構文の書き換えにはattrs - 複雑なcssの書き換えにはセレクター
セレクターはprops制御に書き換えよう! -
ご静聴ありがとうございました!