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
88
Design of the Web (2017)
dangodev
0
63
The Science of Font Selection
dangodev
2
350
Other Decks in Technology
See All in Technology
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
240
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
Engineer Career Talk
lycorp_recruit_jp
0
170
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
いざ、BSC討伐の旅
nikinusu
2
780
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
630
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.3k
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Speed Design
sergeychernyshev
25
620
Facilitating Awesome Meetings
lara
50
6.1k
Writing Fast Ruby
sferik
627
61k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A designer walks into a library…
pauljervisheath
204
24k
4 Signs Your Business is Dying
shpigford
180
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
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