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
52

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
29
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
43
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
99
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
68
The Science of Font Selection
Avatar for Drew Powers dangodev
2
470

Other Decks in Programming

See All in Programming
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
140
AIコーディングエージェント全社導入とセキュリティ対策
Avatar for hikae hikaruegashira
16
9.6k
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
Avatar for アカツキゲームス_Tech akatsukigames_tech
0
120
Reactの歴史を振り返る
Avatar for つちのこ tutinoko
1
180
Go製CLIツールをnpmで配布するには
Avatar for syumai syumai
2
1.2k
バイブコーディング × 設計思考
Avatar for nogu nogu66
0
110
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
10
1.7k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
280
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
4
2.6k
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.5k
AHC051解法紹介
Avatar for eijirou eijirou
0
400
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
1.9k

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k

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.