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
86
Design of the Web (2017)
dangodev
0
62
The Science of Font Selection
dangodev
2
350

Other Decks in Programming

See All in Programming
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
macOS でできる リアルタイム動画像処理
biacco42
7
1.9k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
Identifying User Idenity
moro
6
7.9k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
39
2.4k
What's new in Ruby 2.0
geeforr
342
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Facilitating Awesome Meetings
lara
49
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Code Reviewing Like a Champion
maltzj
519
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
KATA
mclloyd
29
13k
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
40
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k

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.