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
29
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
52
Browser Rendering & Performance
dangodev
0
43
Virtual & Augmented Reality
dangodev
0
98
Design of the Web (2017)
dangodev
0
68
The Science of Font Selection
dangodev
2
460
Other Decks in Technology
See All in Technology
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
5
1.2k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
240
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
140
地図と生成AI
nakasho
0
450
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
19
5.1k
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
730
AIコードアシスタントとiOS開発
jollyjoester
1
200
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
1
270
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
140
Bliki (ja), and the Cathedral, and the Bazaar
koic
6
770
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
210
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Adaptive Systems
keathley
43
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
A designer walks into a library…
pauljervisheath
207
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Balancing Empowerment & Direction
lara
1
480
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Code Reviewing Like a Champion
maltzj
524
40k
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