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
44
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
99
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
69
The Science of Font Selection
Avatar for Drew Powers dangodev
2
470

Other Decks in Programming

See All in Programming
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
400
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
140
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
Avatar for Itaru Ota ota1022
5
1.9k
Vue・React マルチプロダクト開発を支える Vite
Avatar for ANDPAD inc andpad
0
110
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
Avatar for Ryo Okubo syucream
2
800
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
1k
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
200
print("Hello, World")
Avatar for 高見龍 eddie
1
270
もうちょっといいRubyプロファイラを作りたい (2025)
Avatar for osyoyu osyoyu
0
230
兎に角、コードレビュー
Avatar for mitohato14 mitohato14
0
170
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
370

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k

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.