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
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Formの複雑さに立ち向かう
bmthd
1
720
時計仕掛けのCompose
mkeeda
1
280
Immutable ActiveRecord
megane42
0
130
Open source software: how to live long and go far
gaelvaroquaux
0
620
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
『品質』という言葉が嫌いな理由
korimu
0
160
CI改善もDatadogとともに
taumu
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Unsuck your backbone
ammeep
669
57k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Facilitating Awesome Meetings
lara
51
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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.