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
350

Other Decks in Programming

See All in Programming
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
subpath importsで始めるモック生活
10tera
0
310
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
240
初めてDefinitelyTypedにPRを出した話
syumai
0
420

Featured

See All Featured
Statistics for Hackers
jakevdp
796
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Visualization
eitanlees
145
15k
Become a Pro
speakerdeck
PRO
25
5k
A Philosophy of Restraint
colly
203
16k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Navigating Team Friction
lara
183
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Speed Design
sergeychernyshev
25
620
It's Worth the Effort
3n
183
27k
BBQ
matthewcrist
85
9.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.