Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic CSS with Fela

Atomic CSS with Fela

Ben Smithett

July 01, 2020
Tweet

More Decks by Ben Smithett

Other Decks in Programming

Transcript

  1. Normal: style composition in CSS classes .header { background: black;

    padding: 10px; display: flex; } <div class='header'>
  2. 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;'>
  3. 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;'>
  4. 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)
  5. 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; }
  6. CSS size (kb) Features added over time 🐌 code splitting

    CSS Modules `composes` lazy-load below-the-fold sections
  7. 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; }
  8. 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>
  9. 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>
  10. 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>
  11. 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
  12. 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>
  13. 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>
  14. 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 }
  15. 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!
  16. not so inline const root = { ... } const

    logo = { ... } <div className={css(root)}> <img className={css(logo)} /> </div>
  17. 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>
  18. 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)
  19. 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>
  20. You choose how you write CSS (IMHO just use JS

    objects, ask me why later) Fela gives you optimised output
  21. CSS size (kb) Features added over time 🐌 code splitting

    CSS Modules `composes` lazy-load below-the-fold sections