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. Atomic CSS with

    View Slide

  2. What is Atomic CSS?
    compose styles directly on HTML tags
    instead of in abstract CSS classes

    View Slide

  3. Normal: style composition in CSS classes
    .header {
    background: black;
    padding: 10px;
    display: flex;
    }

    View Slide

  4. Normal: style composition in CSS classes
    .header {
    background: black;
    padding: 10px;
    display: flex;
    }

    Not normal: inline styles

    View Slide

  5. Atomic CSS
    .bg-black {
    background: black;
    }
    .padding-s {
    padding: 10px;
    }
    .flex {
    display: flex;
    }

    Normal: style composition in CSS classes
    .header {
    background: black;
    padding: 10px;
    display: flex;
    }

    Not normal: inline styles

    View Slide

  6. why?
    Atomic CSS
    .bg-black {
    background: black;
    }
    .padding-s {
    padding: 10px;
    }
    .flex {
    display: flex;
    }

    Normal: style composition in CSS classes
    .header {
    background: black;
    padding: 10px;
    display: flex;
    }

    Not normal: inline styles

    🚀P🚀E🚀R🚀F🚀O🚀R🚀M🚀A🚀N🚀C🚀E🚀
    (among other reasons)

    View Slide

  7. developing new features
    the normal way:

    View Slide

  8. header.css
    .header {
    background: black;
    padding: 10px;
    display: flex;
    }
    .header-logo {
    border: 0;
    }

    View Slide

  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;
    }

    View Slide

  10. CSS size
    (kb)
    Features added over time

    View Slide

  11. CSS size
    (kb)
    Features added over time
    🐌

    View Slide

  12. CSS size
    (kb)
    Features added over time
    🐌
    code splitting

    View Slide

  13. CSS size
    (kb)
    Features added over time
    🐌
    code splitting
    CSS Modules `composes`

    View Slide

  14. CSS size
    (kb)
    Features added over time
    🐌
    code splitting
    CSS Modules `composes`
    lazy-load below-the-fold sections

    View Slide

  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;
    }

    View Slide

  16. developing new features
    with Atomic CSS:

    View Slide

  17. styles.css
    .bg-black {
    background: black;
    }
    .padding-s {
    padding: 10px;
    }
    .flex {
    display: flex;
    }
    .border-0 {
    border: 0;
    }
    header.template



    View Slide

  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



    footer.template



    View Slide

  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



    footer.template



    View Slide

  20. CSS size
    (kb)
    Features added over time

    View Slide

  21. yay!
    but...

    View Slide

  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

    View Slide

  23. Hand-coding Atomic CSS is gross
    bg-black border-xl flex pad-s
    not CSS
    not on MDN

    View Slide

  24. what if we could write
    dev-friendly
    not-very-performant-looking
    real CSS
    ...but ship atomic classes?

    View Slide

  25. write the CSS you know
    generate atomic classes

    View Slide

  26. header.js
    background: 'black',
    padding: 10,
    display: 'flex'
    })}>
    border: 0
    })} />

    View Slide

  27. header.js
    background: 'black',
    padding: 10,
    display: 'flex'
    })}>
    border: 0
    })} />

    footer.js
    background: 'black',
    padding: 10,
    display: 'grid'
    })}>
    display: 'flex',(
    flexDirection: 'column'
    })} />

    View Slide

  28. header.js
    background: 'black', a
    padding: 10, b
    display: 'flex' c
    })}>
    border: 0 d
    })} />

    footer.js
    background: 'black', a
    padding: 10, b
    display: 'grid' e
    })}>
    display: 'flex',( c
    flexDirection: 'column' f
    })} />

    View Slide

  29. header.js
    background: 'black', a
    padding: 10, b
    display: 'flex' c
    })}>
    border: 0 d
    })} />

    footer.js
    background: 'black', a
    padding: 10, b
    display: 'grid' e
    })}>
    display: 'flex',( c
    flexDirection: 'column' f
    })} />

    output HTML
    // header



    // footer



    output CSS
    .a { background: black }
    .b { padding: 10px }
    .c { display: flex }
    .d { border: 0 }
    .e { display: grid }
    .f { flex-direction: column }

    View Slide

  30. header.js
    background: 'black',
    padding: 10,
    display: 'flex'
    })}>
    border: 0
    })} />

    footer.js
    background: 'black',
    padding: 10,
    display: 'grid'
    })}>
    display: 'flex',(
    flexDirection: 'column'
    })} />

    😱 CSS in JS!

    View Slide

  31. It's the output that matters
    Authoring style is flexible 🙂

    View Slide

  32. not so inline
    const root = {
    ...
    }
    const logo = {
    ...
    }



    View Slide

  33. not so inline
    const root = {
    ...
    }
    const logo = {
    ...
    }



    import from another file
    import {root, logo} from './header.css.js'



    View Slide

  34. not so inline
    const root = {
    ...
    }
    const logo = {
    ...
    }



    import from another file
    import {root, logo} from './header.css.js'



    (with enough Webpack tomfoolery)

    View Slide

  35. not so inline
    const root = {
    ...
    }
    const logo = {
    ...
    }



    import from another file
    import {root, logo} from './header.css.js'



    (with enough Webpack tomfoolery)
    Styled Components
    const Root = styled.div`
    background: black;
    padding: 10px;
    display: flex;
    `
    const Logo = styled.img`
    border: 0;
    `



    View Slide

  36. You choose how you write CSS
    (IMHO just use JS objects, ask me why later)
    Fela gives you optimised output

    View Slide

  37. Unlearn "clever" optimisations

    View Slide

  38. CSS size
    (kb)
    Features added over time
    🐌
    code splitting
    CSS Modules `composes`
    lazy-load below-the-fold sections

    View Slide

  39. CSS
    Modules
    `composes`
    code
    splitting
    lazy-load
    below-the-fold
    sections
    🗑

    View Slide

  40. 🗑
    📄
    📄
    📄
    CSS files

    View Slide



  41. .a{background:black}.b{padding:10px}.c{display:flex}.d{border:0}







    just inline the initial render's
    CSS in

    View Slide

  42. fela.js.org
    styletron.org
    sanblas.netlify.app
    inspect new facebook.com in devtools
    Show me more!

    View Slide