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
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
一休.comレストランにおけるRustの活用
kymmt90
3
580
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
630
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
Making Projects Easy
brettharned
115
5.9k
Building Adaptive Systems
keathley
38
2.2k
Six Lessons from altMBA
skipperchong
26
3.5k
The Language of Interfaces
destraynor
154
24k
How STYLIGHT went responsive
nonsquared
95
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
KATA
mclloyd
29
13k
Navigating Team Friction
lara
183
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
A Tale of Four Properties
chriscoyier
156
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
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