Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React: CSS in JS - React France Meetup

48a313e2ad9f47036b3a4d073cef3e54?s=47 vjeux
December 15, 2014
33
8.3k

React: CSS in JS - React France Meetup

48a313e2ad9f47036b3a4d073cef3e54?s=128

vjeux

December 15, 2014
Tweet

More Decks by vjeux

See All by vjeux
React Rally: Animated -- React Performance Toolbox
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
83
88k
React: CSS in JS
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
654
1.5M
OSCON - React Architecture
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
111
43k
Why does React scale? - JSConf 2014
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
52
2M
Image Layout Algorithms - HTML5 Dev Conf
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
12
860k
React Presentation
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
7
8.7k
Image Layout Algorithms
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
5
680
Generic Image Processing With Climb – 5th ELS
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
1
5k
Climb - A Generic and Dynamic Approach to Image Processing
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
1
2.6k

Featured

See All Featured
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Side Projects
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
37k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
24
6.2k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
4
2k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
25
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
596
63k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
103
16k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k

Transcript

  1. React: CSS in JS Christopher “vjeux” Chedeau

  2. 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

  3. speakerdeck.com/vjeux/react-css-in-js

  4. Let’s build a button

  5. Let’s build a button

  6. Differences

  7. Inline Styles!!1!

  8. Conditionals

  9. Conditionals

  10. Customization

  11. Customization

  12. Customization

  13. Visibility

  14. Visibility

  15. ::after

  16. ::after

  17. :hover

  18. :hover

  19. Media Queries

  20. Media Queries

  21. Media Queries

  22. Conclusion Christopher “vjeux” Chedeau