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

Styling Systems in React

Drew Powers
April 26, 2018
Programming
0
45

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
35
Virtual & Augmented Reality
dangodev
0
89
Design of the Web (2017)
dangodev
0
64
The Science of Font Selection
dangodev
2
390

Other Decks in Programming

See All in Programming
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.7k
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
160
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
Develop Faster With FrankenPHP
dunglas
2
2.5k
requirements with math
moony
0
520
AI時代のプログラミング教育 / programming education in ai era
kishida
23
20k
CQRS+ES勉強会＃１
rechellatek
0
400
安全に倒し切るリリースをするために：15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
体得しよう！RSA暗号の原理と解読
laysakura
3
530
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Speed Design
sergeychernyshev
28
860
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Thoughts on Productivity
jonyablonski
69
4.5k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
How GitHub (no longer) Works
holman
314
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470

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.