Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
styled-componentsで脱CSSModules
Search
camcam_lemon
March 06, 2019
Programming
3
740
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
0
47
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
Ça bouge du côté des animations CSS !
goetter
2
170
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
250
バイセルでの AI を用いた開発の取り組み ~ Devin, Cursor の活用事例・知見共有 ~
umaidashi
0
110
やっと腹落ち「スプリント毎に動くモノをリリースする」〜ゼロから始めるメガバンクグループのアジャイル実践〜
sasakendayo
0
210
Introduction to C Extensions
sylph01
3
130
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
260
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
230
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
140
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
310
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
820
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
KATA
mclloyd
29
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Thoughts on Productivity
jonyablonski
69
4.5k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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制御に書き換えよう! -
ご静聴ありがとうございました!