Este documento habla sobre diferentes formas de escribir estilos en aplicaciones de JavaScript, incluyendo CSS convencional, estilos en línea, CSS Modules, Radium y Styled Components. Explica las ventajas y desventajas de cada enfoque, destacando que Styled Components permite estilos condicionales, animaciones, temas y estilos globales de una manera aislada y explícita. Finalmente, proporciona enlaces a recursos adicionales sobre Styled Components.

1. ESCRIBIENDO ESTILOS
CON
styled-components 💅

2. Escribiendo estilos con styled-components
SERGIO ZAMARRO
Javascript Developer
@zamarrowski
Sergio Zamarro Sánchez
zamarrowski
💅
💄

3. Escribiendo estilos con styled-components💅
CSS is broken
@zamarrowski

4. Escribiendo estilos con styled-components💅 @zamarrowski
Dando estilos en
Vanilla CSS
Inline Styles
CSS Modules
Radium
Styled Components 💅

5. Escribiendo estilos con styled-components💅 @zamarrowski
Vanilla CSS

6. Escribiendo estilos con styled-components💅 @zamarrowski
Vanilla CSS

7. Escribiendo estilos con styled-components💅 @zamarrowski
Vanilla CSS
Soporta todo el CSS
CSS global
Se parece a CSS
No requiere ninguna configuración
Aislado
Explícito

8. Button
.button
.vanilla-light
span
input
h6
li
.dashboard Link
.profile
.avatar
.login-button
#logout-button
h1
.account
.button-light

9. Inline styles
Escribiendo estilos con styled-components💅 @zamarrowski

10. Inline styles
Escribiendo estilos con styled-components💅 @zamarrowski

11. Escribiendo estilos con styled-components💅 @zamarrowski
Inline styles
Soporta todo el CSS
CSS global
Se parece a CSS
No requiere ninguna configuración
Aislado
Explícito

12. Escribiendo estilos con styled-components💅 @zamarrowski
CSS Modules

13. Escribiendo estilos con styled-components💅 @zamarrowski
CSS Modules

14. Escribiendo estilos con styled-components💅 @zamarrowski
CSS Modules
Soporta todo el CSS
CSS global
Se parece a CSS
No requiere ninguna configuración
Aislado
Explícito

15. Escribiendo estilos con styled-components💅 @zamarrowski
Radium

16. Escribiendo estilos con styled-components💅 @zamarrowski
Radium
Soporta todo el CSS
CSS global
Se parece a CSS
No requiere ninguna configuración
Aislado
Explícito

17. Escribiendo estilos con styled-components💅 @zamarrowski
Styled Components 💅

18. Escribiendo estilos con styled-components💅 @zamarrowski
Soporta todo el CSS
CSS global
Se parece a CSS
No requiere ninguna configuración
Aislado
Explícito
Styled Components 💅

19. Escribiendo estilos con styled-components💅 @zamarrowski
Estilos condicionales
Animaciones
Theming
Estilos globales
Estilos a componentes de terceros
Styled Components 💅

20. Escribiendo estilos con styled-components💅 @zamarrowski
Atom Package: https://atom.io/packages/language-babel
Render Benchmarks: https://github.com/A-gambit/CSS-IN-JS-
Benchmarks/blob/master/RESULT.md
Jest Styled Components: https://pusher.com/sessions/meetup/
reactivate-london/jest-styled-components
Enlaces

21. Escribiendo estilos con styled-components💅 @zamarrowski
Muchas gracias!