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
370

Other Decks in Programming

See All in Programming
return文におけるstd::moveについて
onihusube
1
1.4k
HTML/CSS超絶浅い説明
yuki0329
0
130
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.2k
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
280
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
380
Оптимизируем производительность блока Казначейство
lamodatech
0
830
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
850
情報漏洩させないための設計
kubotak
5
1.2k
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
1
490
Go の GC の不得意な 部分を克服したい
taiyow
3
930
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
320
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
470

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Adopting Sorbet at Scale
ufuk
74
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
18
2.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Mobile First: as difficult as doing things right
swwweet
222
9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
210

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.