Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Styling Systems in React

Avatar for Drew Powers Drew Powers
April 26, 2018
Programming
0
54

Styling Systems in React

Why Styled Components are great, and why just using them solves more problems than you’re aware of

Avatar for Drew Powers

Drew Powers

April 26, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
35
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
45
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
100
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
79
The Science of Font Selection
Avatar for Drew Powers dangodev
2
480

Other Decks in Programming

See All in Programming
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
Avatar for Agata Naomichi agatan
2
6.7k
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
12
7k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
8
5.1k
STYLE
Avatar for Koichi ITO koic
0
100
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
5
1.9k
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
300
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
Avatar for s.konishi hasibirok0
0
220
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1.2k
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
240
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
1
270
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
15k
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
200

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
480
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k

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.