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

Styling Systems in React

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
38
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
Metaprogramming isn't real, it can't hurt you
Avatar for Masafumi Okura okuramasafumi
0
110
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
PRO
0
150
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
Avatar for 果物リン fruitriin
0
170
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
120
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
150
Gemini for developers
Avatar for Mete Atamel meteatamel
0
110
あなたはユーザーではない #PdENight
Avatar for Takuma Kajikawa kajitack
3
140
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
220
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2.1k
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
170

Featured

See All Featured
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
440
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
230
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
130
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k

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.