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 Systems in React
Search
Drew Powers
April 26, 2018
Programming
0
44
Styling Systems in React
Why Styled Components are great, and why just using them solves more problems than you’re aware of
Drew Powers
April 26, 2018
Tweet
Share
More Decks by Drew Powers
See All by Drew Powers
Styling in React
dangodev
0
25
Browser Rendering & Performance
dangodev
0
35
Virtual & Augmented Reality
dangodev
0
89
Design of the Web (2017)
dangodev
0
63
The Science of Font Selection
dangodev
2
380
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Grafana Cloudとソラカメ
devoc
0
140
SwiftUI Viewの責務分離
elmetal
PRO
0
140
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
AHC041解説
terryu16
0
590
WebDriver BiDiとは何なのか
yotahada3
1
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
最近のVS Codeで気になるニュース 2025/01
74th
1
250
チームリードになって変わったこと
isaka1022
0
190
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Featured
See All Featured
Designing for Performance
lara
604
68k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Writing Fast Ruby
sferik
628
61k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A better future with KSS
kneath
238
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A Tale of Four Properties
chriscoyier
158
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Transcript
STYLING SYSTEMS IN REACT
NEW CLASS, WHO DIS?
None
BEGUN, THE SPECIFICITY WAR HAS
None
WELCOME TO THE CASCADE ✨ ✨
REACT: CSS IN JS CHRISTOPHER “VJEUX” CHEDEAU (NOV 2014)
SMACSS BEM OOCSS
None
BUT WHAT ABOUT REACT?
TRADITIONAL CSS 1. CLASSNAME 2. SASS 3. STYLABLE.IO 4. CSS
BLOCKS CSS-IN-JS 1. STYLED COMPONENTS 2. EMOTION 3. APHRODITE 4. GLAMOROUS 5. STYLETRON 6. CSS MODULES? NEW!
WHY IS CSS-IN-JS GOOD? 1. NO SYNTAX TO MEMORIZE 2.
NAMING IS EASY 3. CSS MAPS 1:1 WITH MARKUP 4. TALKS TO (REACT) STATE 5. SUPPORTS ALL OF CSS (NOW) 6. TESTABLE (JSC, …)
END.