Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS in JSの話 #friday13json

680 views

Published on

JSON日の金曜日@新潟 9週目 https://friday13json.connpass.com/event/68514/ で喋りました

Published in: Technology
  • Be the first to comment

CSS in JSの話 #friday13json

  1. 1. CSS in JS Yukiya Nakagawa JSON #9 2017.10.13(Fri) @Nkzn
  2. 2. Q. CSS in JS is
  3. 3. A. JS CSS const coolFont = { fontFamily: "CoolFont", fontStyle: "normal", fontWeight: "normal", src: "url('coolfont.woff2') format('woff2')" }; const styles = { heading: { color: 'gray', fontSize: '2rem' }, text: { marginTop: '1rem', margin: 10 } };
  4. 4. React const Hoge = (props) => { return ( <div> <h1 style={styles.heading}> </h1> <p style={styles.text}> </p> <p style={{ color: red }}>{props.hoge}</p> </div> ); }
  5. 5. JSON ※
  6. 6. CSS
  7. 7. CSS 7 https://speakerdeck.com/vjeux/react-css-in-js
  8. 8. 7 1. 2. 3. 4. minify 5. 6. 7.
  9. 9. CSS in JS
  10. 10. React Native 😎 https://facebook.github.io/react-native/docs/height-and-width.html
  11. 11. StyleSheet.create import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); <span style={styles.red}>hoge</span>
  12. 12. Web CSS
  13. 13. https://github.com/Khan/aphrodite
  14. 14. import { StyleSheet } from 'aphrodite'; const styles = StyleSheet.create({ red: { backgroundColor: ‘red' }, blue: { backgroundColor: ‘blue’ }, hover: { ':hover': { backgroundColor: 'red' } }, small: { '@media (max-width: 600px)': { backgroundColor: 'red', } } }); }
  15. 15. RN import { css } from 'aphrodite'; const App = (props) => { return ( <div> <span className={css(styles.red)}>This is red.</span> <span className={css(styles.hover)}>This turns red on hover.</span> <span className={css(styles.small)}> This turns red when the browser is less than 600px width. </span> <span className={css(styles.red, styles.blue)}>This is blue.</span> <span className={css(styles.blue, styles.small)}> This is blue and turns red when the browser is less than 600px width. </span> </div> ); }
  16. 16. 🤔
  17. 17. 🤡
  18. 18. AB ※
  19. 19. CSS in JS 💪

×