CSS & React - Problemas, ejemplos y soluciones

Transcript

1. @keyserfaty Problemas, ejemplos y soluciones CSS & React
2. @keyserfaty Karen Serfaty @keyserfaty ! Frontend Developer " No soy experta en CSS # Organizo NodeConf y Meetup.js
3. @keyserfaty !
4. @keyserfaty
5. @keyserfaty Para agregar un nuevo board Para agregar un nuevo item a un board Para marcar un item como terminado Para eliminar un item
6. @keyserfaty <Board /> <BoardNew />
7. @keyserfaty <BoardNew /> <Item /> <Board />
8. @keyserfaty <BoardNew /> <Item /> <InputBox /> <Board />
9. @keyserfaty ! CSS es global
10. @keyserfaty ¿qué problemas trae esto? - Naming collitions CSS no te avisa cuando dos cosas se llaman iguales. Eso puede llevar a que dos clases se pisen.
11. @keyserfaty ¿qué problemas trae esto? - Subtree matches Una clase de!nida para un padre puede afectar a un hijo que tenga la misma clase.
12. @keyserfaty .article .title { border-bottom: 1px solid; font-size: 1.5em; }
13. @keyserfaty <!-- The .article module --> <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> </article>
14. @keyserfaty <!-- The .article module --> <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> </article> class="title"> class="title">
15. @keyserfaty Isolation Naming collisions Subtree matches =
16. @keyserfaty Algunas cosas que estaría bueno que tuviera CSS: * Collocation * Theming
17. @keyserfaty Collocation Poder integrar el CSS con JS
18. @keyserfaty Collocation - Reutilización de código - Poder usar el poder de JS para escribir CSS
19. @keyserfaty Theming Poder usar themes para estilar la UI. (dark version vs. light version, por ejemplo)
20. @keyserfaty 1) Solo BEM 2) BEM + Librería para React 3) CSS Modules 4) CSS in JS ¿qué soluciones hay para CSS?
21. @keyserfaty Block, element, modi!er BEM: 1) Solo BEM
22. @keyserfaty board board__list__item board__list__item—-completed Block Element Modifier ➡
23. @keyserfaty <div className="board board--full"> <div className="board__title"> {title} </div> <div className="board__list"> <ul> <li className=‘board__list__item’> <span className="board__list__item__complete"> <input title="complete" type=“checkbox" /> </span> <span className="board__list__item__body">{text}</span> <span className="board__list__item__remove"></span> </li> <li className="board__list__new-item"> <span className="board__list__item__body">+ New item</span> </li> </ul> </div> </div>
24. @keyserfaty ✅ BEM blocks <-> React components ✅ Tenemos una naming convention ✅ Podemos de!nir estilos globales si queremos Cosas buenas de este approach: 1) Solo BEM
25. @keyserfaty 1) Solo BEM ! No resuelve el problema de isolation en CSS ! No es collocated ! Muy verbose ! No funciona en React Native Problemas de este approach:
26. @keyserfaty 2) BEM + Librerías para React classnames, reBEM, (…) BEM + Librerías para React:
27. @keyserfaty // bem-cn import block from 'bem-cn' var b = block('button'); // Block b; // 'button' b(); // 'button' // Element b('icon'); // 'button__icon' // Modifier b({type: 'text'}); // 'button button_type_text' b({onlykey: true}); // 'button button_onlykey' b({without: false}); // 'button'
28. @keyserfaty import block from 'bem-cn' const BoardFull = props => { const b = block('board'); const b_item = b('list__item') return ( <div className={b()('full')}> <div className={b('title')}> {title} </div> <div className={b('list')}> <ul> <li className={b_item()}> <span className={b_item('complete')}> <input title="complete" type=“checkbox" /> </span> <span className={b_item('body')}>{text}</span> <span className={b_item('remove')}> </span> </li> <li className={b('list__new-item')}> <span className={b_item('body')}>+ New item</span> </li> </ul> </div> </div> )}
29. @keyserfaty <div className={b()('full')}> <div className={b('title')}> {title} </div> <div className={b('list')}> <ul> <li className={b_item()}> <span className={b_item('complete')}> <input title="complete" type=“checkbox" /> </span> <span className={b_item('body')}>{text}</span> <span className={b_item('remove')}></span> </li> <li className={b('list__new-item')}> <span className={b_item('body')}>+ New item</span> </li> </ul> </div> </div>
30. @keyserfaty <div className="board board--full"> <div className="board__title"> {title} </div> <div className="board__list"> <ul> <li className=‘board__list__item’> <span className="board__list__item__complete"> <input title="complete" type=“checkbox" /> </span> <span className="board__list__item__body">{text}</span> <span className="board__list__item__remove"></span> </li> <li className="board__list__new-item"> <span className="board__list__item__body">+ New item</span> </li> </ul> </div> </div>
31. @keyserfaty Cosas buenas de este approach: ✅ Nos resuelve el problema de lo verbose ✅ El CSS se vuelve más fácil de mantener ✅ + todas las ventajas del approach anterior 2) BEM + Librerías para React
32. @keyserfaty 2) BEM + Librerías para React Problemas de este approach: ! No resuelve el problema de isolation en CSS ! No es collocated ! No funciona en React Native
33. @keyserfaty CSS Modules 3) CSS Modules
34. @keyserfaty // antes de css-modules <div className='board'></span> // después de css-modules <div className=‘board_12l3jk12k’></span>
35. @keyserfaty import styles from ‘./styles.css’ import cn from ‘classnames’ const BoardFull = props => { return ( <div className={cn(styles.board, styles.full)}> <div className={styles.title}> {title} </div> <div className={styles.list}> <ul> <li className={styles.item}> <span className={styles.item-complete}> <input title="complete" type=“checkbox" /> </span> <span className={styles.item-body}>{text}</span> <span className={styles.item-remove}> </span> </li> <li className={styles.item-new}> <span className={styles.item-body}>+ New item</span> </li> </ul> </div> </div> )}
36. @keyserfaty 3) CSS Modules Cosas buenas de este approach: ✅ Es 100% isolated ✅ Es más o menos collocated
37. @keyserfaty 3) CSS Modules Problemas de este approach: ! Se necesita un building system " ! No soporta theming ! No funciona en React Native ⚠ Soporta estilos globales pero de forma rara
38. @keyserfaty 4) CSS in JS CSS in JS JSS
39. @keyserfaty CSS in JS vs. Inline styles
40. @keyserfaty // Inline styles const styles = { color: ‘#fff’ } <div styles={styles}></div> // CSS in JS const styles = { color: ‘#fff’ } <div className={styles}></div>
41. @keyserfaty import injectSheet from 'react-jss' const styles = { button: { background: props => props.color }, label: { fontWeight: 'bold' } } const Button = ({classes, children}) => ( <button className={classes.button}> <span className={classes.label}> {children} </span> </button> ) export default injectSheet(styles)(Button)
42. @keyserfaty import injectSheet from 'react-jss' const BoardFull = ({ styles }) => { return ( <div className={cn(styles.board, styles.full)}> <div className={styles.title}> {title} </div> <div className={styles.list}> <ul> <li className={styles.item}> <span className={styles.item-complete}> <input title="complete" type=“checkbox" /> </span> <span className={styles.item-body}>{text}</span> <span className={styles.item-remove}> </span> </li> <li className={styles.item-new}> <span className={styles.item-body}>+ New item</span> </li> </ul> </div> </div> )} export default injectSheet(styles)(BoardFull)
43. @keyserfaty 4) CSS in JS Cosas buenas de este approach: ✅ Es 100% isolated y colocated ✅ Se puede usar el 100% de CSS ✅ Funciona en React Native
44. @keyserfaty 4) CSS in JS Problemas de este approach: ! Necesita un wrapper component ⚠ Soporta más o menos estilos globales ⚠ Soporta más o menos theming
45. @keyserfaty ¿conclusión?
46. @keyserfaty CSS
47. @keyserfaty resumen: ✅ Isolation ✅ Collocation ⚠ Todo lo demás
48. @keyserfaty cosas de las que no hablé: Styled components Inline styles
49. @keyserfaty cosas para seguir: https://philipwalton.com/articles/side-effects-in-css/ https://www.youtube.com/playlist?list=PL7BkG8tGKrU0Xq7KNp_j4mVTRGoKKZ61u
50. @keyserfaty gracias @keyserfaty