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
Styling in React
Search
Drew Powers
June 21, 2018
Technology
0
23
Styling in React
Drew Powers
June 21, 2018
Tweet
Share
More Decks by Drew Powers
See All by Drew Powers
Styling Systems in React
dangodev
0
44
Browser Rendering & Performance
dangodev
0
35
Virtual & Augmented Reality
dangodev
0
86
Design of the Web (2017)
dangodev
0
62
The Science of Font Selection
dangodev
2
350
Other Decks in Technology
See All in Technology
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
620
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
君は隠しイベントを見つけれるか?
mujyun
0
290
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
GitHub's CSS Performance
jonrohan
1030
460k
For a Future-Friendly Web
brad_frost
175
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Documentation Writing (for coders)
carmenintech
65
4.4k
Code Review Best Practice
trishagee
64
17k
It's Worth the Effort
3n
183
27k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
5 TIPS FOR STYLING IN REACT 1 2 3 4
5
AVOID NESTED SELECTORS 1 2 3 4 5
None
BEGUN, THE SPECIFICITY WAR HAS
KEEP LAYOUT WITHIN COMPONENTS 1 2 3 4 5
None
None
None
AVOID MAGIC NUMBERS 1 2 3 4 5
None
None
MAKE BREAKPOINTS WHEN IT LOOKS WEIRD (DON’T MANAGE GLOBAL BREAKPOINTS)
1 2 3 4 5
635 PX t HOME SHOP GALLERY ABOUT CONTACT 600 PX
/ 900 PX / 1200 PX / 1800 PX THE 100% CORRECT WAY TO DO CSS BREAKPOINTS
DON’T EXTEND STYLES 1 2 3 4 5 (PLEASE REPEAT
YOURSELF)
SASS STYLED COMPONENTS
COINCIDENCE
None
LEARN SIBLING SELECTORS 1 2 3 4 5 6 7
8
REACT • ONCLICK • HANDLE TAB KEY • HANDLE SPACE
BAR • HANDLE ACCESSIBILITY CSS
+ > ~ * [ ]
USE BETTER EASINGS 1 2 3 4 5 6 7
8
linear transition-timing-function border-color box-shadow color opacity transform: rotate cubic-bezier() transform:
scale translate MATERIAL.IO / DESIGN / MOTION / SPEED.HTML#EASING animation-timing-function
USE A RESPONSIVE TYPE SCALE 1 2 3 4 5
6 7 8
8 10 12 14 16 20 24 28 36 48
None
None
“RESPONSIVE TYPE SCALE”
THANKS! 1 2 3 4 5 @_DREWPOWERS