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
40
Browser Rendering & Performance
dangodev
0
29
Virtual & Augmented Reality
dangodev
0
78
Design of the Web (2017)
dangodev
0
58
The Science of Font Selection
dangodev
2
290
Other Decks in Technology
See All in Technology
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.7k
Signals Unleashed: The Full Guide
rainerhahnekamp
0
340
転移学習とドメイン適応の基礎
kmatsui
2
560
Let's get started with Ruby && Rails Tips
sinsoku
0
190
デザインシステム基盤構築実践
leveragestech
0
740
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
490
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
340
Algyan イベント振り返り
linyixian
0
170
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
nttcom
1
310
OpenShiftはじめの一歩から継続的なチャレンジ
mame500
0
250
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
1
630
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Into the Great Unknown - MozCon
thekraken
10
980
A Modern Web Designer's Workflow
chriscoyier
689
190k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
How to Ace a Technical Interview
jacobian
272
22k
Become a Pro
speakerdeck
PRO
9
4.5k
Web Components: a chance to create the future
zenorocha
304
41k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
114
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Code Reviewing Like a Champion
maltzj
513
39k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Git: the NoSQL Database
bkeepers
PRO
421
63k
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