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.

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 &
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; }
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
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
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
109. Jack Franklin JavaScript Playground bit.ly/2anU8fF
110. THANK YOU