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
53
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
30
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 Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
AkarengaLT vol.38
hashimoto_kei
1
130
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
CSC509 Lecture 07
javiergs
PRO
0
250
理論と実務のギャップを超える
eycjur
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
CSC509 Lecture 08
javiergs
PRO
0
260
三者三様 宣言的UI
kkagurazaka
0
280
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
450
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.8k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Music & Morning Musume
bryan
46
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Pragmatic Product Professional
lauravandoore
36
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Making Projects Easy
brettharned
120
6.4k
GitHub's CSS Performance
jonrohan
1032
470k
Writing Fast Ruby
sferik
630
62k
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.