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
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Formの複雑さに立ち向かう
bmthd
1
720
時計仕掛けのCompose
mkeeda
1
280
Immutable ActiveRecord
megane42
0
130
Open source software: how to live long and go far
gaelvaroquaux
0
620
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
お前もAI鬼にならないか？👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー！👺
taishiyade
5
3.8k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
『品質』という言葉が嫌いな理由
korimu
0
160
CI改善もDatadogとともに
taumu
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
テストをしないQAエンジニアは何をしているか？
nealle
0
130

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Unsuck your backbone
ammeep
669
57k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Facilitating Awesome Meetings
lara
51
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

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.