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
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
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
360
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
shadcn/uiを使ってReactでの開発を加速させよう！
lef237
0
300
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
130
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
210
Оптимизируем производительность блока Казначейство
lamodatech
0
950
Rubyでつくるパケットキャプチャツール
ydah
0
170
Findy Team+ Awardを受賞したかった！ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
400
AHC041解説
terryu16
0
370

Featured

See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Making the Leap to Tech Lead
cromwellryan
133
9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Producing Creativity
orderedlist
PRO
343
39k
Optimizing for Happiness
mojombo
376
70k
Bash Introduction
62gerente
610
210k
Designing for Performance
lara
604
68k
We Have a Design System, Now What?
morganepeng
51
7.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Invisible Side of Design
smashingmag
299
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k

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.