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
最近のVS Codeで気になるニュース 2025/01
74th
1
250
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
DROBEの生成AI活用事例 with AWS
ippey
0
130
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
AHC041解説
terryu16
0
590
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Producing Creativity
orderedlist
PRO
343
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Gamification - CAS2011
davidbonilla
80
5.1k
Bash Introduction
62gerente
610
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
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.