Atomic CSS with Fela

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