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

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.

C6eef2f316659472539e666f4da9d539?s=128

Juan Carlos Ruiz

November 09, 2019
Tweet

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

  43. None
  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
  64. None
  65. Componente estilizado

  66. — Componente estilizado —

  67. — Componente estilizado —

  68. — Componente estilizado —

  69. — Componente estilizado —

  70. — Componente estilizado —

  71. — Componente estilizado —

  72. None
  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

  126. None
  127. ¡GRACIAS!