Inline Styles and React

Transcript

1. 潘睿 //@plrthink Inline Styles and React
2. modao.cc
3. https://www.youtube.com/watch?v=ERB1TJBn32c Great thanks to
4. Inline Styles and React
5. <ul> <li style="color: #030303">one</li> <li style="color: #030303">two</li> </ul> NOT
6. const divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor pre fi x } React.render(<div style={divStyle}>Hello World!</div>, mountNode) InlineStyles.js https://facebook.github.io/react/tips/inline-styles.html
7. Sass in the browser?
8. https://speakerdeck.com/vjeux/react-css-in-js
9. survey on css-tricks.com
10. survey on css-tricks.com
12. “This totally breaks separation of concerns”
13. BOUNDARIES ?
14. HTML
15. <ul> <li>one</li> <li>two</li> </ul> list.html
16. HTML CSS
17. list.sass message { &--read { color: #D3D3D3; } }
18. HTML CSS JS
19. $(‘.message__read-mark').click((e) => { $(this).closest('.message') .addClass('message--read') }) list.js
20. …
21. React
22. Reactive
23. UI Component
24. JSX CSS
25. render() { const classes = classnames({ message: true, message--read: this.state.isRead, }) return ( <li className={classes}> this.props.title </li> ) } Message.jsx
26. render () { const classes = classnames({ message: true, message--read: this.state.isRead, }) return ( <li className={classes}> this.props.title </li> ) } Message.jsx
27. Message.sass message { &--read { color: #D3D3D3; } }
28. State class
29. –Michael Chan “Style is not ‘CSS’.”
30. Put styles in JS?
31. const styles = { message: { color: #030303, }, isRead: { color: #D3D3D3, }, } render () { return ( <li style={Object.assign( styles.message, this.state.isRead && styles.isRead, )} > this.props.title </li> ) } Message.jsx
32. const styles = { message: { color: #030303, }, isRead: { color: #D3D3D3, }, } render () { return ( <li style={Object.assign( styles.message, this.state.isRead && styles.isRead, )} > this.props.title </li> ) } Message.jsx
33. <li style="color:#D3D3D3;" data-reactid="…"> Hi </li> <li style="color:#030303;" data-reactid="…"> w3ctech </li> DOM
34. State class
35. JSX + styles
36. Component
37. Bonus
38. CSS global scope Bonus
39. http://fyspring fi eld.com/post/104938581611
40. Global scope • Styles are JS objects • Directly apply styles
41. Complex class name Bonus
42. Bonus Modularization
43. List.jsx // ... import styleGlobals from './style/Globals' const styles = { color: styleGlobals.fooBlue, backgroundColor: styleGlobals.barRed, } // ...
44. Dead code elimination Bonus
45. Maintainability Bonus
46. Bonus Variables
47. Bonus Functions
48. Dynamic styles Bonus
49. render () { const styles = { // ... width: this.state.progrssValue, // ... } return ( <span style={styles}></span> ) } ProgressBar.jsx
50. Shared on npm with styles Bonus
51. Concerns
52. Concerns Theming
53. Theming import dark from './themes/dark' import light from './themes/light'
54. Concerns Pseudo class
55. const styles = { message: {...}, fi rstMessage: {...}, } return ( <ul className={messags}> { this.state.messages.map((message, i) => { return ( <li style={Object.assign( styles.message, i === 0 && styles. fi rstMessage )}> {message.title} </li> )} ) } </ul> )
56. Concerns • :hover • media queries • vendor pre fi xes • …
57. Radium
58. const styles = { base: { '@media (min-width: 320px)': { width: '100%', ':hover': { background: 'white' } } } }
59. var Radium = require('radium'); // or import Radium from 'radium' // If you want to use the <Style /> component // you can do import Radium, { Style } from 'radium'
60. // For ES6 and ES7 @Radium class Button extends React.Component { //... } // or class Button extends React.Component { // ... } module.exports = Radium(Button) // or class Button extends React.Component { // ... } Button = Radium(Button)
61. https://github.com/FormidableLabs/radium/tree/master/docs/comparison
62. Best Practice ??
63. Give it a try !!