Save 37% off PRO during our Black Friday Sale! »

Atomic CSS with Fela

Atomic CSS with Fela

317e499b0a1a7f00cbbe58d365a4377f?s=128

Ben Smithett

July 01, 2020
Tweet

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!