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

Other Decks in Programming

See All in Programming
A comprehensive view of refactoring
Avatar for Marabesi marabesi
0
970
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
150
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
1
850
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
170
ReadMoreTextView
Avatar for Sungyong An fornewid
1
450
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
Avatar for Mitsuharu Maruyama m4maruyama
1
130
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
2
680
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
150
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
280
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
500
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
490
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.4k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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.