CSS Modules & React

CSS Modules & React

CSS improved a lot in the last years but for many, it's still one of the hardest parts to handle while developing big web applications. Pre-processed languages like Sass and Less added many new features but we still have to rely on methodologies such as BEM and OOCSS to avoid name collisions.

In ReactJS many people tried to solve these issues using the style attribute or by developing libraries like Radium. Although these approaches fix some of the problems they bring new challenges on their own.

CSS Modules give you the best of both words. Write CSS code using all the tools you love and forget about name collisions.

In this talk, I will explain what CSS Modules are, why they are so good and how you can use them in your project.

2334ff4bd8e0678248853d80c1604f27?s=128

Giorgio Polvara

July 24, 2016
Tweet

Transcript

  1. 3.

    CSS

  2. 7.
  3. 11.
  4. 12.
  5. 16.
  6. 17.
  7. 18.
  8. 19.
  9. 20.
  10. 21.
  11. 22.
  12. 23.
  13. 24.
  14. 25.
  15. 26.
  16. 27.
  17. 28.
  18. 29.

    CSS

  19. 31.

    CSS

  20. 32.
  21. 34.

    CSS

  22. 39.

    $bg-cl: blue; .one { background-color: $bg-cl; } :root { --bg-cl:

    blue; } .one { background-color: var(--bg-cl); } NO VARIABLES
  23. 47.
  24. 50.
  25. 51.
  26. 59.
  27. 61.

    var styles = { label: { fontSize: '1.5rem' } }

    .label { font-size: 1.5rem; }
  28. 63.

    var styles = { label: { fontSize: '1.5rem' } }

    render () { return ( <div /> ) }
  29. 64.

    var styles = { label: { fontSize: '1.5rem' } }

    render () { return ( <div style={styles.label} /> ) }
  30. 79.

    PERFORMANCE Click Me Click Me Click Me Click Me Click

    Me Click Me Click Me Click Me Click Me
  31. 81.
  32. 84.
  33. 85.
  34. 86.

    .label { font-size: 1.5rem; } import styles from './menu.css'; render

    () { return ( <div className={styles.label} /> ) } menu.css menu.js
  35. 88.

    import styles from './menu.css'; render () { return ( <div

    className={styles.label} /> ) } <div class='menu_label_456cd' />
  36. 90.

    .label { font-size: 1.5rem; } menu.css .label { color: #bada55;

    } hero.css .label { font-weight: bold; } form.css
  37. 91.

    .label { font-size: 1.5rem; } menu.css .label { color: #bada55;

    } hero.css .label { font-weight: bold; } form.css .hero_label_123ab { color: #bada55; } .menu_label_456cd { font-size: 1.5rem; } .form_label_789ef { font-weight: bold; } bundle.css
  38. 93.

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

    className; color: yellow; } .otherClassName { composes: className from "./style.css"; color: yellow; }
  39. 94.
  40. 97.

    .label { font-size: 1.5rem; } .label:hover { color: red; }

    .pointer + .label { cursor: pointer; }
  41. 98.

    .label { font-size: 1.5rem; } .label:hover { color: red; }

    .pointer + .label { cursor: pointer; } .item { color: $brand; &:hover { color: invert($brand); } }
  42. 99.

    .label { font-size: 1.5rem; } .label:hover { color: red; }

    .pointer + .label { cursor: pointer; } .item { color: $brand; &:hover { color: invert($brand); } } .pane { display: flex; }
  43. 104.
  44. 105.
  45. 106.
  46. 107.
  47. 108.
  48. 110.