Slide 1
Slide 1 text
React: CSS in JS
Christopher “vjeux” Chedeau
Slide 2
Slide 2 text
1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation
Problems with CSS at Scale
1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation
Slide 3
Slide 3 text
speakerdeck.com/vjeux/react-css-in-js
Slide 4
Slide 4 text
Let’s build a button
Slide 5
Slide 5 text
Let’s build a button
Slide 6
Slide 6 text
Differences
Slide 7
Slide 7 text
Inline Styles!!1!
Slide 8
Slide 8 text
Conditionals
Slide 9
Slide 9 text
Conditionals
Slide 10
Slide 10 text
Customization
Slide 11
Slide 11 text
Customization
Slide 12
Slide 12 text
Customization
Slide 13
Slide 13 text
Visibility
Slide 14
Slide 14 text
Visibility
Slide 15
Slide 15 text
::after
Slide 16
Slide 16 text
::after
Slide 17
Slide 17 text
:hover
Slide 18
Slide 18 text
:hover
Slide 19
Slide 19 text
Media Queries
Slide 20
Slide 20 text
Media Queries
Slide 21
Slide 21 text
Media Queries
Slide 22
Slide 22 text
Conclusion
Christopher “vjeux” Chedeau