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
71
The Science of Font Selection
dangodev
2
480
Other Decks in Technology
See All in Technology
JAWS UG AI/ML #32 Amazon BedrockモデルのライフサイクルとEOL対応/How Amazon Bedrock Model Lifecycle Works
quiver
1
110
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
20251027_findyさん_音声エージェントLT
almondo_event
2
490
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
140
Dify on AWS 環境構築手順
yosse95ai
0
160
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
690
20251027_マルチエージェントとは
almondo_event
1
470
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
390
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
940
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
340
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
re:Inventに行くまでにやっておきたいこと
nagisa53
0
720
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
A designer walks into a library…
pauljervisheath
209
24k
GitHub's CSS Performance
jonrohan
1032
470k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Speed Design
sergeychernyshev
32
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Bash Introduction
62gerente
615
210k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
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