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
23
Browser Rendering & Performance
dangodev
0
35
Virtual & Augmented Reality
dangodev
0
88
Design of the Web (2017)
dangodev
0
63
The Science of Font Selection
dangodev
2
350

Other Decks in Programming

See All in Programming
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
120
subpath importsで始めるモック生活
10tera
0
300
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
CSC509 Lecture 09
javiergs
PRO
0
140
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
みんなでプロポーザルを書いてみた
yuriko1211
0
260
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
距離関数を極める！ / SESSIONS 2024
gam0022
0
280
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How GitHub (no longer) Works
holman
310
140k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
For a Future-Friendly Web
brad_frost
175
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k

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.