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
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
3
1.2k
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
160
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
170
Vue・React マルチプロダクト開発を支える Vite
Avatar for ANDPAD inc andpad
0
110
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
1.2k
Claude Codeで挑むOSSコントリビュート
Avatar for kmuto eycjur
0
190
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
250
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
380
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
1
800
ECS初心者の仲間 – TUIツール「e1s」の紹介
Avatar for Xing Yahao keidarcy
0
150
Claude Codeで実装以外の開発フロー、どこまで自動化できるか？失敗と成功
Avatar for ndaDayo.Sugawawa ndadayo
4
1.9k
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
160

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
510
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k

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.