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
58
0

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

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
Nuxt Server Components
Avatar for wattanx wattanx
0
220
Understanding Apache Lucene - More than just full-text search
Avatar for Alexander Reelsen spinscale
0
150
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
110
L’IA au service des devs : Anatomie d'un assistant de Code Review
Avatar for Thomas Boileau toham
0
150
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
160
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
130
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
310
AI 開発合宿を通して得た学び
Avatar for ニフティ株式会社 niftycorp
PRO
0
180
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
2
1.4k
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
680
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.7k
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k

Featured

See All Featured
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
270
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
330
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
280
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
240
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k

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.