Pro Yearly is on sale from $80 to $50! »

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. CSS Modules ReactJS &

  2. GIORGIO POLVARA @GPX WEB DEVELOPER

  3. CSS

  4. HTML CSS &

  5. HTML CSS &

  6. HTML CSS &

  7. HTML

  8. HTML 1993

  9. HTML 1993

  10. HTML 1993 <H1> <STRONG> <BLOCKQUOTE>

  11. HTML 1993

  12. HTML 1993

  13. HTML 1993 1996

  14. HTML CSS 1993 1996

  15. HTML CSS &

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. CSS

  30. CSS TINY LANGUAGE

  31. CSS

  32. CSS CSS

  33. CSS CSS CSS

  34. CSS

  35. IT HAS FLAWS CSS

  36. IT HAS FLAWS

  37. NO VARIABLES

  38. :root { --bg-cl: blue; } .one { background-color: var(--bg-cl); }

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

    blue; } .one { background-color: var(--bg-cl); } NO VARIABLES
  40. NO VARIABLES NO FUNCTIONS

  41. button:active { color: invert($btn-cl); } button { @include button(); }

    NO VARIABLES NO FUNCTIONS
  42. button { display: -webkit-box; display: -ms-flexbox; display: flex; } NO

    VARIABLES NO FUNCTIONS VENDOR PREFIXES
  43. NO VARIABLES NO FUNCTIONS VENDOR PREFIXES

  44. NO VARIABLES NO FUNCTIONS VENDOR PREFIXES

  45. NO VARIABLES NO FUNCTIONS VENDOR PREFIXES SOLVED* }

  46. BIG ONE PROBLEM

  47. GLOBALS

  48. .label { font-size: 1.5rem; } .label { background: red; }

  49. .label { font-size: 1.5rem; } .label { background: red; }

  50. None
  51. label .

  52. label .menu__

  53. label .menu__ --on

  54. label .menu__ --on label .form__

  55. label .menu__ --on label .form__ label .hero__ --hover

  56. label .menu__ --on label .form__ label .hero__ --hover

  57. INLINE STYLE THE METHOD

  58. Christopher Chedeau @vjeux

  59. None
  60. .label { font-size: 1.5rem; }

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

    .label { font-size: 1.5rem; }
  62. var styles = { label: { fontSize: '1.5rem' } }

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

    render () { return ( <div /> ) }
  64. var styles = { label: { fontSize: '1.5rem' } }

    render () { return ( <div style={styles.label} /> ) }
  65. var styles = { label: { fontSize: '1.5rem', ':hover': {

    backgroundColor: 'blue' } } }
  66. CSS-JS IS WEIRD

  67. CSS-JS IS WEIRD NO CSS TOOLS

  68. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  69. PERFORMANCE

  70. PERFORMANCE Click Me

  71. PERFORMANCE Click Me

  72. PERFORMANCE Click Me

  73. PERFORMANCE onMouseOver Click Me

  74. PERFORMANCE onMouseOver updateStyles() Click Me

  75. PERFORMANCE onMouseOver updateStyles() Virtual DOM Click Me

  76. PERFORMANCE onMouseOver updateStyles() Virtual DOM DOM Changes Click Me

  77. PERFORMANCE onMouseOver updateStyles() Virtual DOM DOM Changes onMouseOut updateStyles() Virtual

    DOM DOM Changes
  78. PERFORMANCE Click Me

  79. PERFORMANCE Click Me Click Me Click Me Click Me Click

    Me Click Me Click Me Click Me Click Me
  80. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  81. None
  82. .label { font-size: 1.5rem; }

  83. .label { font-size: 1.5rem; } menu.css

  84. .label { font-size: 1.5rem; } render () { return (

    <div /> ) } menu.css menu.js
  85. .label { font-size: 1.5rem; } import styles from './menu.css'; render

    () { return ( <div /> ) } menu.css menu.js
  86. .label { font-size: 1.5rem; } import styles from './menu.css'; render

    () { return ( <div className={styles.label} /> ) } menu.css menu.js
  87. import styles from './menu.css'; render () { return ( <div

    className={styles.label} /> ) }
  88. import styles from './menu.css'; render () { return ( <div

    className={styles.label} /> ) } <div class='menu_label_456cd' />
  89. .label { font-size: 1.5rem; } .label { color: #bada55; }

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

    } hero.css .label { font-weight: bold; } form.css
  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
  92. .className { color: green; background: red; } .otherClassName { composes:

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

    className; color: yellow; } .otherClassName { composes: className from "./style.css"; color: yellow; }
  94. :global(.my-class) > .localClass { color: red; } :global { @keyframes

    globalAnimation { to { color: blue; } } }
  95. .label { font-size: 1.5rem; }

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

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

    .pointer + .label { cursor: pointer; }
  98. .label { font-size: 1.5rem; } .label:hover { color: red; }

    .pointer + .label { cursor: pointer; } .item { color: $brand; &:hover { color: invert($brand); } }
  99. .label { font-size: 1.5rem; } .label:hover { color: red; }

    .pointer + .label { cursor: pointer; } .item { color: $brand; &:hover { color: invert($brand); } } .pane { display: flex; }
  100. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  101. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  102. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  103. CSS-JS IS WEIRD NO CSS TOOLS PERFORMANCE

  104. GLOBALS

  105. GLOBALS

  106. None
  107. None
  108. None
  109. Jack Franklin JavaScript Playground bit.ly/2anU8fF

  110. THANK YOU