CSS-in-JS. Estilos en React con styled-components

Conoceremos el panorama actual de CSS y los mal usos del lenguaje, para ponernos en situación y ver las ventajas que nos va a ofrecer CSS-in-JS en nuestros desarrollos con React.

Como una de las soluciones más populares a los ‘problemas’ actuales con CSS vamos a utilizar styled-components. Una propuesta que nos va a permitir desarrollar componentes estilizados preparados para ser utilizados en nuestro proyecto, ayudándonos a dar solución a los problemas ocasionados por la cascada, especificidad y declaraciones de nombres mejorando también nuestro performance CSS.

Existe un gran debate entre personas muy opuestas a utilizar CSS-in-JS, en parte es debido a que no se llega a conocer en profundidad las soluciones que nos ofrecen. Con styled-components podemos utilizar cualquier característica que nos proporciona CSS vanilla. Veremos cómo definir componentes estilizados, estilos condicionales, estilos globales, animaciones, theming y estilizar componentes de terceros.

Transcript

1. { CSS-in-JS } Estilos en React con styled-components
2. `UI / Front-end developer - PcComponentes` —— Juan Carlos Ruiz Carrión —— @klaufel
3. Panorama actual
4. CSS
5. Problemas frente a un mal uso de CSS
6. Herencia y cascada
7. Cascada Importancia / Especificidad / Orden
8. Cascada Importancia / Especificidad / Orden
9. 0 ID 0 Clases, atributos y pseudo-clases 0 Elementos y pseudo-elementos Especificidad
10. Especificidad 0 ID 0 Clases, atributos y pseudo-clases 1 Elementos y pseudo-elementos div
11. Especificidad 0 ID 1 Clases, atributos y pseudo-clases 0 Elementos y pseudo-elementos .button
12. Especificidad 0 ID 2 Clases, atributos y pseudo-clases 0 Elementos y pseudo-elementos .button:hover
13. Especificidad 1 ID 2 Clases, atributos y pseudo-clases 1 Elementos y pseudo-elementos #app a.button:hover
14. — Cascada — Especificidad
15. — Cascada — Especificidad
16. — Cascada — Especificidad
17. — Cascada — Especificidad
18. ¿Flexible? Sí
19. ¿Flexible? Sí ¿Peligroso? También
20. 4.800 RULES 6.574 SELECTORS 11.789 DECLARATIONS 249 PROPERTIES Total selectors by type 422 ID 6.177 CLASS 865 PSEUDO CLASS 688 PSEUDO ELEMENT — CSS Stats — 462KB 78KB Gzipped file size File size 75,10% Unused CSS average (%)
21. 4.800 RULES 6.574 SELECTORS 11.789 DECLARATIONS 249 PROPERTIES Total selectors by type 422 ID 6.177 CLASS 865 PSEUDO CLASS 688 PSEUDO ELEMENT — CSS Stats — 462KB 78KB Gzipped file size File size 75,10% Unused CSS average (%)
22. 4.800 RULES 6.574 SELECTORS 11.789 DECLARATIONS 249 PROPERTIES Total selectors by type 422 ID 6.177 CLASS 865 PSEUDO CLASS 688 PSEUDO ELEMENT — CSS Stats — 462KB 78KB Gzipped file size File size 75,10% Unused CSS average (%)
23. — CSS Stats — 32 264 176 88 352
24. — CSS Stats — 32 #id #id .class #id .class #id .class.class element #id #id #id #id #id #id 264 176 88 352
25. — CSS Stats — 32 #id .class #id element .class.class #id .class element .class { … } 264 176 88 352
26. — CSS Stats — 32 264 176 88 352
27. Un mal uso de la: Herencia Cascada Especificidad
28. Un mal uso de la: Herencia Cascada Especificidad Arquitectura insostenible
29. Evolución del uso del lenguaje y soluciones
30. — Preprocesadores — LESS SASS
31. — Postprocesadores — Autoprefixer PostCSS
32. Metodologías y arquitecturas
33. — Metodologías — BEM Block / Element / Modifier
34. — Metodologías — BEM - Block Element Modifier
35. — Metodologías — BEM - Block Element Modifier
36. ITCSS Inverted Triangle CSS — Arquitecturas — ITCSS - Inverted Triangle CSS
37. — Arquitecturas — ITCSS - Inverted Triangle CSS Settings Tools Generic Elements Objects Components Utilities ITCSS
38. — Filosofía de componente —
39. CSS Cascading Style Sheets
40. CSS Cascading Style Sheets Component Style Sheets
41. { CSS-in-JS }
42. { CSS-in-JS } NO SON inline styles
44. { CSS-in-JS } NO SIGNIFICA dejar de escribir CSS
45. { CSS-in-JS } LO QUE SÍ ES
46. { CSS in JS } - Enfoque a componentes
47. { CSS in JS } - Enfoque a componentes - Estilos aislados
48. { CSS in JS } - Enfoque a componentes - Estilos aislados - Toda la potencia de JS
49. styled-components
50. React React Native
51. Vue
52. ¿Por qué styled-components?
53. — styled-components — Escribes y soporta todo el CSS
54. Escribes y soporta todo el CSS CSS global — styled-components —
55. Escribes y soporta todo el CSS CSS global Estilos aislados — styled-components —
56. Escribes y soporta todo el CSS CSS global Estilos aislados Vendor prefixing — styled-components —
57. Escribes y soporta todo el CSS CSS global Estilos aislados Vendor prefixing Critical CSS automático — styled-components —
58. Escribes y soporta todo el CSS CSS global Estilos aislados Vendor prefixing Critical CSS automático Server side rendering — styled-components —
59. Escribes y soporta todo el CSS CSS global Estilos aislados Vendor prefixing Critical CSS automático Server side rendering Plug-and-Play! — styled-components —
60. — styled-components — Escribes y soporta todo el CSS CSS global Estilos aislados Vendor prefixing Critical CSS automático Server side rendering Plug-and-Play!
61. < > styled components emotion
62. ¿Qué podemos hacer con styled-components?
63. Componentes estilizados Estilos condicionales Extensión de estilos Theming Estilos globales Animaciones
65. Componente estilizado
66. — Componente estilizado —
67. — Componente estilizado —
68. — Componente estilizado —
69. — Componente estilizado —
70. — Componente estilizado —
71. — Componente estilizado —
73. Estilos condicionales
74. — Estilos condicionales —
75. — Estilos condicionales —
76. — Estilos condicionales —
77. — Estilos condicionales —
78. — Estilos condicionales —
79. — Estilos condicionales —
80. Extensión de estilos
81. — Extensión de estilos —
82. — Extensión de estilos —
83. — Extensión de estilos —
84. — Extensión de estilos —
85. — Extensión de estilos — Componente de terceros
86. — Extensión de estilos — Componente de terceros
87. — Extensión de estilos — css prop
88. — Extensión de estilos — css prop
89. — Extensión de estilos — css prop
90. — Extensión de estilos — css prop
91. Theming
92. — Theming—
93. — Theming—
94. — Theming—
95. — Theming—
96. — Theming—
97. Estilos globales
98. Reinicio de estilos (Normalize?) Fuentes del proyecto Estilos genéricos — Estilos globales —
99. — Estilos globales —
100. — Estilos globales —
101. — Estilos globales —
102. — Estilos globales —
103. Animaciones
104. — Animaciones —
105. — Animaciones —
106. — Animaciones —
107. — Animaciones —
108. Performance
109. — CSS Stats — styled-components
110. 4.800 RULES 6.574 SELECTORS 11.789 DECLARATIONS 249 PROPERTIES Total selectors by type 422 ID 6.177 CLASS 865 PSEUDO CLASS 688 PSEUDO ELEMENT — CSS Stats — 462KB 78KB Gzipped file size File size 75,10% Unused CSS average (%) lego.com (web antigua)
111. — CSS Stats — lego.com (actual con styled-components)
112. lego.com (actual con styled-components) — CSS Stats — 827 RULES 911 SELECTORS 3.917 DECLARATIONS 152 PROPERTIES Total selectors by type 0 ID 731 CLASS 113 PSEUDO CLASS 10 PSEUDO ELEMENT 96KB 15KB Gzipped file size File size ~ 0% Unused CSS average (%)
113. — CSS Stats — 827 RULES 911 SELECTORS Total selectors by type 0 ID 731 CLASS 15KB ~ 0% Unused CSS average (%) Gzipped file size 4.800 RULES 6.574 SELECTORS Total selectors by type 422 ID 6.177 CLASS 78KB 75,10% Unused CSS average (%) Gzipped file size lego.com (actual con styled-components)
114. — CSS Stats — 32 264 176 88 352 lego.com (web antigua)
115. — CSS Stats — 32 24 16 8 32 lego.com (actual con styled-components)
116. — CSS Stats — 32 lego.com (actual con styled-components) 24 16 8 32 10 .class { }
117. — CSS Stats — 32 lego.com (actual con styled-components) 20 24 16 8 32 .class:hover { }
118. — CSS Stats — 32 lego.com (actual con styled-components) 24 16 8 32
119. styled-components v5.0.0-rc.0 is out!
120. styled-components v5.0 vs v4.0 31% reducción del bundle (16.2kB vs. 12.33kB min+gzip) ⚡ 22% rapidez de client-side rendering 26% rapidez de actualización de estilos dinámicos 45% (!!!) rapidez de server-side rendering
121. Mount deep tree styled-components v5
122. ❤ < > styled components = ?
123. Design system < > styled components + + ATOMIC DESIGN Storybook
124. Design system < > styled components + + ATOMIC DESIGN Storybook ❤
125. En definitiva… < > styled components
127. ¡GRACIAS!