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
最近のVS Codeで気になるニュース 2025/01
74th
1
250
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
DROBEの生成AI活用事例 with AWS
ippey
0
130
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
【PHP】 破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
AHC041解説
terryu16
0
590
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160

Featured

See All Featured
Making Projects Easy
brettharned
116
6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Producing Creativity
orderedlist
PRO
343
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Gamification - CAS2011
davidbonilla
80
5.1k
Bash Introduction
62gerente
610
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k

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.