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

Styling Systems in React

Drew Powers
April 26, 2018
Programming
0
44

Styling Systems in React

Why Styled Components are great, and why just using them solves more problems than you’re aware of

Drew Powers

April 26, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
dangodev
0
25
Browser Rendering & Performance
dangodev
0
35
Virtual & Augmented Reality
dangodev
0
89
Design of the Web (2017)
dangodev
0
63
The Science of Font Selection
dangodev
2
380

Other Decks in Programming

See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Grafana Cloudとソラカメ
devoc
0
140
SwiftUI Viewの責務分離
elmetal
PRO
0
140
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
AHC041解説
terryu16
0
590
WebDriver BiDiとは何なのか
yotahada3
1
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
最近のVS Codeで気になるニュース 2025/01
74th
1
250
チームリードになって変わったこと
isaka1022
0
190
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110

Featured

See All Featured
Designing for Performance
lara
604
68k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Writing Fast Ruby
sferik
628
61k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
A better future with KSS
kneath
238
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A Tale of Four Properties
chriscoyier
158
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270

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.