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
52

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
29
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
43
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
98
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
68
The Science of Font Selection
Avatar for Drew Powers dangodev
2
460

Other Decks in Programming

See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
Avatar for yosh_yumyum yoshyum
3
1.2k
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
140
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
4
620
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
410
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
Avatar for Marco Roth marcoroth
2
760
React は次の10年を生き残れるか：3つのトレンドから考える
Avatar for Yuka O’oka oukayuka
38
13k
AWS Summit Japan 2024と2025の比較／はじめてのKiro、今あなたは岐路に立つ
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
210
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
Avatar for Yusuke Suto sutochin26
1
7.6k
構文解析器入門
Avatar for ydah ydah
7
1.7k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
480
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
880
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
Avatar for panda_program panda_program
3
600

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
980
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
480
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k

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.