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

Styling Systems in React

Avatar for Drew Powers 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

Avatar for Drew Powers

Drew Powers

April 26, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
30
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
45
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
99
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
71
The Science of Font Selection
Avatar for Drew Powers dangodev
2
480

Other Decks in Programming

See All in Programming
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
190
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
17
3.2k
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
Avatar for Hans-Peter Grahsl hpgrahsl
0
120
三者三様 宣言的UI
Avatar for Keita Kagurazaka kkagurazaka
0
260
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
820
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
Avatar for Oliver Drotbohm olivergierke
3
980
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
680
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
160
マンガアプリViewerの大画面対応を考える
Avatar for kk__777 kk__777
0
380
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
Avatar for もっち mottyzzz
12
7.2k
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
320

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
310
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
15k

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.