CSS in JS

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?

414db81dca21f468b4d7acd88172370c?s=128

Michele Bertoli

April 28, 2016
Tweet

Transcript

  1. CSS in JS @MicheleBertoli

  2. Michele (Mee-keh-leh) Front End Developer at YPlan Member of WEBdeBS

    Follow me @MicheleBertoli I’ve got the CSSinJS skill on LinkedIn
  3. MicheleBertoli/css-in-js

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

    Mindset
  5. Cascading Style Sheets

  6. Problems with CSS at scale (vjeux) - Global Namespace -

    Dependencies - Dead Code Elimination - Minification - Sharing Constants - Non-deterministic Resolution - Isolation
  7. Inline Styles

  8. const divStyle = { color: 'white', backgroundImage: `url(${imgUrl})`, WebkitTransition: 'all',

    msTransition: 'all', }; ReactDOM.render( <div style={divStyle}>Hello World!</div>, mountNode );
  9. Pros - Recompute styles - Object literals - Application state

    - Testing
  10. Cons - Pseudo classes/elements - Media queries - Style fallbacks

    - Animations - !important - Separation of concerns - Performance (?)
  11. Debugging

  12. Aphrodite

  13. import { StyleSheet, css } from 'aphrodite'; const styles =

    StyleSheet.create({ btn: { color: 'red' } }); el.innerHTML = `<button class="${css(styles.btn)}">Yo</button>`;
  14. const styles = StyleSheet.create({ hover: { ':hover': { color: 'red'

    } }, small: { '@media (max-width: 600px)': { color: 'red' } }, });
  15. Aphrodite Inline Styles that work.

  16. Features - Pseudo selectors - Media queries - Smart style

    injection - Autoprefixer included
  17. CSSX

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

    'red', }); button.update({ color: 'green', });
  19. const sheet = cssx(); sheet.add(<style> .button { color: blue; }

    </style>);
  20. CSSX CSSX is a set of tools that will help

    you write vanilla CSS in JavaScript.
  21. Benefits - Avoid additional “state” classes - No interaction with

    the DOM - Real dynamic CSS
  22. CSS Modules

  23. // button.css .common { color: red; } // button.js import

    styles from "./button.css"; el.innerHTML = `<button class="${styles.common}">Yo</button>`;
  24. .JoFm3I_KMlvnoKpksAd60 { color: red; } <button class="JoFm3I_KMlvnoKpksAd60">Yo</button>;

  25. CSS Modules A CSS Module is a CSS file in

    which all class names and animation names are scoped locally by default.
  26. Composition .className { color: green; background: red; } .otherClassName {

    composes: className; color: yellow; }
  27. Webpack module.exports = { module: { loaders: [ { test:

    /\.css$/, loader: 'style-loader!css-loader' } ] } };
  28. None
  29. Bonus

  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; } <h2 class="f4 f3-ns fw6 mb0">Responsive</h2>
  31. Atomic CSS The bad parts: - Too many classes -

    Similar to inline styles - Hard to maintain The good parts: - Quick prototyping - CSS file size
  32. Atomic CSS Modules .title { composes: fw6 f4 f3-ns from

    './fonts.css'; composes: mb0 from './margins.css'; } <h2 class="${styles.title}">Responsive</h2>
  33. The End

  34. Recap - Use the right tool, no matter if it

    breaks the rules - Inline styles vs local scope - Appearance vs state - Have fun :)
  35. Any Questions?