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

Styling Systems in React

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Drew Powers Drew Powers
April 26, 2018
Programming
0
58

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
42
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
49
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
110
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
83
The Science of Font Selection
Avatar for Drew Powers dangodev
2
490

Other Decks in Programming

See All in Programming
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
570
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
140
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
180
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
910
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.6k
安いハードウェアでVulkan
Avatar for Fadis fadis
1
810
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
450
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
120
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
180
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
170
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.8k

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
96
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
470
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
230
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
420
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
560
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
86
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.1k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
250
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
850

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.