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
52
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
29
Browser Rendering & Performance
dangodev
0
43
Virtual & Augmented Reality
dangodev
0
98
Design of the Web (2017)
dangodev
0
68
The Science of Font Selection
dangodev
2
460
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.6k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
200
構文解析器入門
ydah
7
1.7k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
300
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
150
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
640
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
640
PHPカンファレンス関西2025 基調講演
sugimotokei
5
830
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Navigating Team Friction
lara
187
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Balancing Empowerment & Direction
lara
1
480
A Tale of Four Properties
chriscoyier
160
23k
What's in a price? How to price your products and services
michaelherold
246
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Orchestrator
shlominoach
189
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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.