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
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
360
Azure Well-Architected Framework入門
tomokusaba
1
140
serverless team topology
_kensh
3
240
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
6
2.1k
Dify on AWS 環境構築手順
yosse95ai
0
160
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
150
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
280
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
470
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.2k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
4
890
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Embracing the Ebb and Flow
colly
88
4.9k
Code Review Best Practice
trishagee
72
19k
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