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