Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styling Systems in React

Drew Powers
April 26, 2018
Programming
0
46

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

More Decks by Drew Powers

See All by Drew Powers
Styling in React
dangodev
0
25
Browser Rendering & Performance
dangodev
0
36
Virtual & Augmented Reality
dangodev
0
90
Design of the Web (2017)
dangodev
0
65
The Science of Font Selection
dangodev
2
390

Other Decks in Programming

See All in Programming
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
890
PHP で学ぶ OAuth 入門
azuki
1
130
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.5k
ミリしらMCP勉強会
watany
4
740
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
230
MCP調べてみました！ / Exploring MCP
uhzz
2
2.2k
SwiftUI API Design Lessons
niw
1
260
国漢文混用体からHolloまで
minhee
1
170
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
320
Do Dumb Things
mitsuhiko
0
420
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
160
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.6k

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.1k
Agile that works and the tools we love
rasmusluckow
328
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Scaling GitHub
holman
459
140k
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
184
15k
Done Done
chrislema
183
16k
Site-Speed That Sticks
csswizardry
5
480
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Why Our Code Smells
bkeepers
PRO
336
57k

Transcript

  1. STYLING SYSTEMS IN REACT

  2. NEW CLASS, WHO DIS?

  3. None

  4. BEGUN, THE SPECIFICITY WAR HAS

  5. None

  6. WELCOME TO THE CASCADE ✨ ✨

  7. REACT: CSS IN JS CHRISTOPHER “VJEUX” CHEDEAU (NOV 2014)

  8. SMACSS BEM OOCSS

  9. None

  10. BUT WHAT ABOUT REACT?

  11. 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!

  12. 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, …)

  13. END.