CSS Modules, CSS Variables and the Future of Reusable CSS

Presented at CSSConf Budapest, 2016 <3

Transcript

1. Reusable CSS CSS VARIABLES, CSS MODULES & THE FUTURE OF @glenmaddern
2. HELLO BUDAPEST! ♥
3. Reusable CSS CSS VARIABLES, CSS MODULES & THE FUTURE OF @glenmaddern
5. WHY IS IT SO HARD TO SHARE CSS?
6. WHY IS IT SO HARD TO REUSE CSS?
7. import something from 'somewhere' something.leftPad()
8. THE HUMAN BRAIN IS A (IN)CONSISTENCY-DETECTING MACHINE
9. http://semantic-ui.com
10. http://semantic-ui.com
11. http://semantic-ui.com
12. http://www.novolume.co.uk/blog/all-websites-look-the-same/
13. http://graphicriver.net/
15. WE DON'T NEED MORE TOOLING TO MAKE OUR CURRENT COMPONENTS THEMEABLE WE NEED TO START BUILDING BETTER COMPONENTS
16. st ep #1
17. RESPONSIVE COMPONENTS
18. A COMPONENT SHOULD RESPOND TO ITS ENVIRONMENT • • RATHER THAN THE ENVIRONMENT OVERRIDING THE COMPONENT
19. OUTSIDE-IN OVERRIDES
20. https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)
21. http://semantic-ui.com
22. MAKE YOUR COMPONENTS LESS RESPONSIBLE & MORE RESPONSIVE
23. layout
24. PADDING CONTENT MARGIN
25. PADDING CONTENT MARGIN
26. .component { width: 50%; margin-top: 2rem; flex-grow: 1; } ❌
27. .parent { display: flex; padding: 1rem; } .parent > * { flex-grow: 1; } ONE ONE TWO ONE TWO THREE
28. .parent { display: flex; padding: 1rem; } .parent > * { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } ONE ONE TWO ONE TWO THREE
29. .parent { display: flex; padding: 1rem; } .parent > * { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } .parent > :first-child { flex: 0 0 50%; } ONE TWO ONE TWO THREE ONE TWO THREE FOUR
30. LAYOUT IS THE CONCERN OF THE p arent
31. DEMO: CURRENTCOLOR
32. https://www.youtube.com/watch?v=jPOBVaomzLE
33. css v ari able s
34. http://caniuse.com/#feat=css-variables
35. CSS CUSTOM PROPERTIES CSS VARIABLES =
36. .component { --size: 2rem; width: calc(2 * var(--size)); height: var(--size); } .component
37. .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); } .component .container .component .container { --spacing: 1rem; }
38. .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); } .component .component.large .large { --spacing: 4rem; /* or */ --size: 4rem; }
39. .component { background: var(--bg, black); color: var(--fg, white); }
40. .component { background: var(--bg, black); color: var(--fg, white); } (bg, fg) => <Component style.../>
41. DEMO: INVERTED BUTTON
42. INHERITANCE THE CASCADE vs
43. st ep #2
44. EXPLICIT COMPONENTS
45. http://semantic-ui.com/elements/button.html
46. http://jxnblk.com/rebass/#Button
47. DEMO: DOCUMENTATION
48. NAMING MISMATCHES?
49. .container .container { --grid-size: 1rem; } .component .component .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); }
50. .component .container .component.fix .container { --grid-size: 1rem; } .fix { --spacing: var(--grid-size); } .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); }
51. st ep #3
52. RESILIENT COMPONENTS
53. w arning: re act
54. import styles from './MediaObject.css' const MediaObject = ({ title, image, text }) => ( <div className={styles.outer}> <img className={styles.img} src={ image }/> <div className={styles.inner}> <h1 className={styles.h1}>{ title }</h1> <p className={styles.p}>{ text }</p> </div> </div> )
55. import styles from './MediaObject.css' const MediaObject = ({ title, image, text, theme=styles }) =>( <div className={theme.outer}> <img className={theme.img} src={ image }/> <div className={theme.inner}> <h1 className={theme.h1}>{ title }</h1> <p className={theme.p}>{ text }</p> </div> </div> ) https://github.com/css-modules/css-modules/issues/147
56. DEMO: INTERNAL STRUCTURE DOCS
57. ✅ RESPOND TO ENVIRONMENT ✅ USE INTERNAL VARIABLES ✅ EXPOSE INTERNAL STRUCTURE
58. t hank you! @glenmaddern