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
45
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
480

Other Decks in Programming

See All in Programming
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
Avatar for Yusaku Nishi jrsaruo
0
130
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
Avatar for Sobolev Nikita sobolevn
0
160
Advance Your Career with Open Source
Avatar for ivargrimstad ivargrimstad
0
340
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
180
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
370
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
120
非同期jobをtransaction内で 呼ぶなよ！絶対に呼ぶなよ！
Avatar for Yuto Urushima alstrocrack
0
540
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
330
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
Le côté obscur des IA génératives
Avatar for Pascal Le Merrer pascallemerrer
0
120
AIで開発生産性を上げる個人とチームの取り組み
Avatar for TaniiGo taniigo
0
130

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k

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.