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
360

Other Decks in Programming

See All in Programming
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
200
42 best practices for Symfony, a decade later
tucksaun
1
180
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
バグを見つけた？それAppleに直してもらおう！
uetyo
0
180
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
460
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
930
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
770
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Cost Of JavaScript in 2023
addyosmani
45
7k
How GitHub (no longer) Works
holman
311
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
4 Signs Your Business is Dying
shpigford
181
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Six Lessons from altMBA
skipperchong
27
3.5k
Optimizing for Happiness
mojombo
376
70k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
How to train your dragon (web standard)
notwaldorf
88
5.7k

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.