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
46

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
36
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
92
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
65
The Science of Font Selection
Avatar for Drew Powers dangodev
2
430

Other Decks in Programming

See All in Programming
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
Avatar for ChengHao Yang tico88612
0
190
Boast Code Party / RubyKaigi 2025 After Event
Avatar for はる lemonade_37
0
120
事業KPIを基に価値の解像度を上げる
Avatar for Nealle nealle
0
160
iOSアプリで測る！名古屋駅までの 方向と距離
Avatar for Ryu-nakayama ryunakayama
0
160
データベースの技術選定を突き詰める ～複数事例から考える最適なデータベースの選び方～
Avatar for nnaka2992 nnaka2992
3
3k
Design Pressure
Avatar for Hynek Schlawack hynek
0
190
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
120
バイラテラルアップサンプリング
Avatar for Fadis fadis
3
650
ruby.wasmとWebSocketで遊ぼう！
Avatar for lni_T lnit
0
120
クラシルリワードにおける
iOSアプリ開発の取り組み
Avatar for fumito nakazawa funzin
1
500
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
Avatar for shiro seike seike460
2
600
Duke on CRaC with Jakarta EE
Avatar for ivargrimstad ivargrimstad
1
400

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.4k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k

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.