React: CSS in JS - React France Meetup

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

React: CSS in JS - React France Meetup

48a313e2ad9f47036b3a4d073cef3e54?s=128

vjeux

December 15, 2014
Tweet

Want more?

48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
82
84k
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
646
1.3M
48a313e2ad9f47036b3a4d073cef3e54?s=48 vjeux
110
42k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
12
630
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
3
320
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
220
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
410
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
8
240
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
320
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
640
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
180
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
260

Transcript

  1. 1.

    React: CSS in JS Christopher “vjeux” Chedeau

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

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

  4. 4.

    Let’s build a button

  5. 5.

    Let’s build a button

  6. 6.

    Differences

  7. 7.

    Inline Styles!!1!

  8. 8.

    Conditionals

  9. 9.

    Conditionals

  10. 10.

    Customization

  11. 11.

    Customization

  12. 12.

    Customization

  13. 13.

    Visibility

  14. 14.

    Visibility

  15. 15.

    ::after

  16. 16.

    ::after

  17. 17.

    :hover

  18. 18.

    :hover

  19. 19.

    Media Queries

  20. 20.

    Media Queries

  21. 21.

    Media Queries

  22. 22.

    Conclusion Christopher “vjeux” Chedeau