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

Styling Systems in React

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Drew Powers Drew Powers
April 26, 2018
Programming
0
54

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

Other Decks in Programming

See All in Programming
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1k
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280
Oxlint JS plugins
Avatar for kazupon kazupon
1
810
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
770
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
1.1k
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
160
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
HDC tutorial
Avatar for Michiel Stock michielstock
1
360
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
170
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.3k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
360
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430

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.