Atomic CSS with Fela

Transcript

1. Atomic CSS with
2. What is Atomic CSS? compose styles directly on HTML tags instead of in abstract CSS classes
3. Normal: style composition in CSS classes .header { background: black; padding: 10px; display: flex; } <div class='header'>
4. Normal: style composition in CSS classes .header { background: black; padding: 10px; display: flex; } <div class='header'> Not normal: inline styles <div style='background: black; padding: 10px; display: flex;'>
5. Atomic CSS .bg-black { background: black; } .padding-s { padding: 10px; } .flex { display: flex; } <div class='bg-black padding-s flex'> Normal: style composition in CSS classes .header { background: black; padding: 10px; display: flex; } <div class='header'> Not normal: inline styles <div style='background: black; padding: 10px; display: flex;'>
6. why? Atomic CSS .bg-black { background: black; } .padding-s { padding: 10px; } .flex { display: flex; } <div class='bg-black padding-s flex'> Normal: style composition in CSS classes .header { background: black; padding: 10px; display: flex; } <div class='header'> Not normal: inline styles <div style='background: black; padding: 10px; display: flex;'> 🚀P🚀E🚀R🚀F🚀O🚀R🚀M🚀A🚀N🚀C🚀E🚀 (among other reasons)
7. developing new features the normal way:
8. header.css .header { background: black; padding: 10px; display: flex; } .header-logo { border: 0; }
9. header.css .header { background: black; padding: 10px; display: flex; } .header-logo { border: 0; } footer.css .footer { background: black; padding: 10px; display: grid; } .footer-links { display: flex; flex-direction: column; }
10. CSS size (kb) Features added over time
11. CSS size (kb) Features added over time 🐌
12. CSS size (kb) Features added over time 🐌 code splitting
13. CSS size (kb) Features added over time 🐌 code splitting CSS Modules `composes`
14. CSS size (kb) Features added over time 🐌 code splitting CSS Modules `composes` lazy-load below-the-fold sections
15. header.css .header { background: black; padding: 10px; display: flex; } .header-logo { border: 0; } footer.css .footer { background: black; padding: 10px; display: grid; } .footer-links { display: flex; flex-direction: column; }
16. developing new features with Atomic CSS:
17. styles.css .bg-black { background: black; } .padding-s { padding: 10px; } .flex { display: flex; } .border-0 { border: 0; } header.template <div class='bg-black padding-s flex'> <img class='border-0' /> </div>
18. styles.css .bg-black { background: black; } .padding-s { padding: 10px; } .flex { display: flex; } .border-0 { border: 0; } .grid { display: grid; } .flex-col { flex-direction: column; } header.template <div class='bg-black padding-s flex'> <img class='border-0' /> </div> footer.template <div class='bg-black padding-s grid'> <div class='flex flex-col' /> </div>
19. styles.css .bg-black { background: black; } .padding-s { padding: 10px; } .flex { display: flex; } .border-0 { border: 0; } .grid { display: grid; } .flex-col { flex-direction: column; } header.template <div class='bg-black padding-s flex'> <img class='border-0' /> </div> footer.template <div class='bg-black padding-s grid'> <div class='flex flex-col' /> </div>
20. CSS size (kb) Features added over time
21. yay! but...
22. Hand-coding Atomic CSS is gross Learning an abstraction bg-black border-xl flex pad-s instead of just writing the CSS you already know
23. Hand-coding Atomic CSS is gross bg-black border-xl flex pad-s not CSS not on MDN
24. what if we could write dev-friendly not-very-performant-looking real CSS ...but ship atomic classes?
25. write the CSS you know generate atomic classes
26. header.js <div className={css({ background: 'black', padding: 10, display: 'flex' })}> <img className={css({ border: 0 })} /> </div>
27. header.js <div className={css({ background: 'black', padding: 10, display: 'flex' })}> <img className={css({ border: 0 })} /> </div> footer.js <div className={css({ background: 'black', padding: 10, display: 'grid' })}> <div className={css({ display: 'flex',( flexDirection: 'column' })} /> </div>
28. header.js <div className={css({ background: 'black', a padding: 10, b display: 'flex' c })}> <img className={css({ border: 0 d })} /> </div> footer.js <div className={css({ background: 'black', a padding: 10, b display: 'grid' e })}> <div className={css({ display: 'flex',( c flexDirection: 'column' f })} /> </div>
29. header.js <div className={css({ background: 'black', a padding: 10, b display: 'flex' c })}> <img className={css({ border: 0 d })} /> </div> footer.js <div className={css({ background: 'black', a padding: 10, b display: 'grid' e })}> <div className={css({ display: 'flex',( c flexDirection: 'column' f })} /> </div> output HTML // header <div class='a b c'> <img class='d' /> </div> // footer <div class='a b e'> <div class='c f' /> </div> output CSS .a { background: black } .b { padding: 10px } .c { display: flex } .d { border: 0 } .e { display: grid } .f { flex-direction: column }
30. header.js <div className={css({ background: 'black', padding: 10, display: 'flex' })}> <img className={css({ border: 0 })} /> </div> footer.js <div className={css({ background: 'black', padding: 10, display: 'grid' })}> <div className={css({ display: 'flex',( flexDirection: 'column' })} /> </div> 😱 CSS in JS!
31. It's the output that matters Authoring style is flexible 🙂
32. not so inline const root = { ... } const logo = { ... } <div className={css(root)}> <img className={css(logo)} /> </div>
33. not so inline const root = { ... } const logo = { ... } <div className={css(root)}> <img className={css(logo)} /> </div> import from another file import {root, logo} from './header.css.js' <div className={css(root)}> <img className={css(logo)} /> </div>
34. not so inline const root = { ... } const logo = { ... } <div className={css(root)}> <img className={css(logo)} /> </div> import from another file import {root, logo} from './header.css.js' <div className={css(root)}> <img className={css(logo)} /> </div> (with enough Webpack tomfoolery)
35. not so inline const root = { ... } const logo = { ... } <div className={css(root)}> <img className={css(logo)} /> </div> import from another file import {root, logo} from './header.css.js' <div className={css(root)}> <img className={css(logo)} /> </div> (with enough Webpack tomfoolery) Styled Components const Root = styled.div` background: black; padding: 10px; display: flex; ` const Logo = styled.img` border: 0; ` <Root> <Logo /> </Root>
36. You choose how you write CSS (IMHO just use JS objects, ask me why later) Fela gives you optimised output
37. Unlearn "clever" optimisations
38. CSS size (kb) Features added over time 🐌 code splitting CSS Modules `composes` lazy-load below-the-fold sections
39. CSS Modules `composes` code splitting lazy-load below-the-fold sections 🗑
40. 🗑 📄 📄 📄 CSS files
41. <html> <head> <style>.a{background:black}.b{padding:10px}.c{display:flex}.d{border:0}</style> </head> <body> <div class='a b c'> <img class='d' /> </div> <body> </html> just inline the initial render's CSS in <head>
42. fela.js.org styletron.org sanblas.netlify.app inspect new facebook.com in devtools Show me more!