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
30
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
53
Browser Rendering & Performance
dangodev
0
45
Virtual & Augmented Reality
dangodev
0
99
Design of the Web (2017)
dangodev
0
69
The Science of Font Selection
dangodev
2
480
Other Decks in Technology
See All in Technology
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
740
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
20250929_QaaS_vol20
mura_shin
0
110
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Speed Design
sergeychernyshev
32
1.1k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Become a Pro
speakerdeck
PRO
29
5.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
4 Signs Your Business is Dying
shpigford
185
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GitHub's CSS Performance
jonrohan
1032
460k
KATA
mclloyd
32
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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