CSS in JS

In this talk we will go through the main problems with CSS at scale and we will see some interesting JavaScript-based solutions, from Inline Styles to CSS Modules. Are you ready to enter the magical world of CSS in JS?

Transcript

1. CSS in JS
   @MicheleBertoli
   

   View Slide

2. Michele (Mee-keh-leh)
   Front End Developer at YPlan
   Member of WEBdeBS
   Follow me @MicheleBertoli
   I’ve got the CSSinJS skill on LinkedIn
   

   View Slide

3. MicheleBertoli/css-in-js
   

   View Slide

4. - Give it five minutes
   - Unlearn everything
   - Components
   Mindset
   

   View Slide

5. Cascading Style Sheets
   

   View Slide

6. Problems with CSS at scale (vjeux)
   - Global Namespace
   - Dependencies
   - Dead Code Elimination
   - Minification
   - Sharing Constants
   - Non-deterministic Resolution
   - Isolation
   

   View Slide

7. Inline Styles
   

   View Slide

8. const divStyle = {
   color: 'white',
   backgroundImage: `url(${imgUrl})`,
   WebkitTransition: 'all',
   msTransition: 'all',
   };
   ReactDOM.render(
   Hello World!,
   mountNode
   );
   

   View Slide

9. Pros
   - Recompute styles
   - Object literals
   - Application state
   - Testing
   

   View Slide

10. Cons
    - Pseudo classes/elements
    - Media queries
    - Style fallbacks
    - Animations
    - !important
    - Separation of concerns
    - Performance (?)
    

    View Slide

11. Debugging
    

    View Slide

12. Aphrodite
    

    View Slide

13. import { StyleSheet, css } from 'aphrodite';
    const styles = StyleSheet.create({
    btn: { color: 'red' }
    });
    el.innerHTML = `Yo`;
    

    View Slide

14. const styles = StyleSheet.create({
    hover: {
    ':hover': { color: 'red' }
    },
    small: {
    '@media (max-width: 600px)': { color: 'red' }
    },
    });
    

    View Slide

15. Aphrodite
    Inline Styles that work.
    

    View Slide

16. Features
    - Pseudo selectors
    - Media queries
    - Smart style injection
    - Autoprefixer included
    

    View Slide

17. CSSX
    

    View Slide

18. const sheet = cssx();
    const button = sheet.add('.button', {
    color: 'red',
    });
    button.update({
    color: 'green',
    });
    

    View Slide

19. const sheet = cssx();
    sheet.add(<br/>.button {<br/>color: blue;<br/>}<br/>);
    

    View Slide

20. CSSX
    CSSX is a set of tools that will help you write vanilla CSS in
    JavaScript.
    

    View Slide

21. Benefits
    - Avoid additional “state” classes
    - No interaction with the DOM
    - Real dynamic CSS
    

    View Slide

22. CSS Modules
    

    View Slide

23. // button.css
    .common {
    color: red;
    }
    // button.js
    import styles from "./button.css";
    el.innerHTML = `Yo`;
    

    View Slide

24. .JoFm3I_KMlvnoKpksAd60 {
    color: red;
    }
    Yo;
    

    View Slide

25. CSS Modules
    A CSS Module is a CSS file in which all class names and
    animation names are scoped locally by default.
    

    View Slide

26. Composition
    .className {
    color: green;
    background: red;
    }
    .otherClassName {
    composes: className;
    color: yellow;
    }
    

    View Slide

27. Webpack
    module.exports = {
    module: {
    loaders: [
    { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
    }
    };
    

    View Slide

28. View Slide

29. Bonus
    

    View Slide

30. @media screen and (min-width: 48em) {
    .f3-ns { font-size: 1.5rem; }
    }
    .f4 { font-size: 1.25rem; }
    .mb0 { margin-bottom: 0; }
    .fw6 { font-weight: 600; }
    Responsive
    

    View Slide

31. Atomic CSS
    The bad parts:
    - Too many classes
    - Similar to inline styles
    - Hard to maintain
    The good parts:
    - Quick prototyping
    - CSS file size
    

    View Slide

32. Atomic CSS Modules
    .title {
    composes: fw6 f4 f3-ns from './fonts.css';
    composes: mb0 from './margins.css';
    }
    Responsive
    

    View Slide

33. The End
    

    View Slide

34. Recap
    - Use the right tool, no matter if it breaks the rules
    - Inline styles vs local scope
    - Appearance vs state
    - Have fun :)
    

    View Slide

35. Any Questions?
    

    View Slide