CSS en JS: Integración y Ventajas en Aplicaciones React

Curso de Frameworks y Librerías de JavaScript

Contenido del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:48

CSS en JS: Integración y Ventajas en Aplicaciones React

Curso de Frameworks y Librerías de JavaScript

Clase 17 de 28

Clase 17 / 28

Recursos

Integrar estilos directamente dentro de los componentes de JavaScript es una de las prácticas más potentes del desarrollo frontend moderno. CSS in JS no reemplaza al CSS tradicional, sino que cambia la forma en que escribimos estilos durante el desarrollo, y al final genera CSS normal que el navegador puede interpretar sin problemas. La verdadera ventaja está en aprovechar las características de un lenguaje de programación para crear estilos dinámicos y mantener todo organizado dentro de cada componente.

¿Cómo se trabaja tradicionalmente con CSS y preprocesadores?

La forma clásica de aplicar estilos consiste en escribir hojas de estilo en archivos .css y enlazarlos al documento HTML [00:42]. También es posible usar estilos en línea o dentro de una etiqueta <style>, pero en la mayoría de los casos todo termina consolidándose en un archivo .css separado.

Más allá de CSS puro, existen los preprocesadores [01:06], herramientas que permiten escribir CSS de forma más amigable:

Variables (antes de que CSS las soportara nativamente).
Ciclos, condicionales y funciones.
Mixins y filtros.

Algunos de los más conocidos son SASS, LESS y Stylus. Todo lo que escribimos con ellos se compila a CSS estándar que el navegador entiende.

Por otro lado están los posprocesadores como PostCSS [01:33], que permiten usar funcionalidades que CSS tendrá en el futuro y las compilan a código compatible con los navegadores actuales.

¿Por qué CSS in JS mejora el trabajo con componentes?

Los componentes son la forma moderna de dividir aplicaciones en piezas reutilizables [01:48]. Con CSS in JS logramos que la estructura HTML, la lógica en JavaScript y los estilos convivan dentro del mismo componente, en lugar de tener el CSS aislado en otro archivo.

Pero la ventaja no es solo de organización. Al escribir estilos con JavaScript podemos programarlos, haciéndolos dinámicos. Veamos un ejemplo sencillo [02:22]:

css h2 { color: white; font-size: 60px; }

Esta sería la forma tradicional. Pero con Styled Components para React, que es la herramienta más popular de CSS in JS [02:50], se transforma en algo así:

javascript const Title = styled.h2 color: white; font-size: 60px;;

Usamos la función styled de la librería, elegimos la etiqueta (h2) y dentro de template literals (comillas invertidas) escribimos los estilos. En lugar de aplicar reglas a todos los h2 de la aplicación, definimos que estos estilos solo se usan cuando llamamos al componente Title [03:20].

¿Cómo funcionan los estilos dinámicos con props?

Aquí es donde JavaScript marca la diferencia [03:37]. Podemos hacer que el componente reciba una prop llamada error y cambiar el color según su valor:

Sin el atributo error: el título se muestra en blanco.
Con error o error={true}: el título cambia a rojo.

Esto permite que los estilos reaccionen al estado de la aplicación sin necesidad de clases CSS adicionales ni lógica externa.

¿Es posible usar el contexto general de la aplicación?

Sí. Al crear componentes con styled, estos reciben props automáticas que pueden conectarse con el contexto de la aplicación [04:15]. Por ejemplo:

Si el usuario está suscrito, el título se muestra en verde.
Si no lo está, se muestra en azul.

El color del título ya no depende del componente en sí, sino del estado global: si el usuario hizo login, si está suscrito, si la aplicación está en dark mode o light mode [04:30].

¿CSS in JS elimina los estilos globales?

Este es uno de los mitos más comunes y la respuesta es clara: no [04:55]. Las herramientas de CSS in JS ofrecen mecanismos para definir estilos globales, ya sea para el body, para ciertas clases o para etiquetas generales. Decir que los estilos globales son una desventaja de CSS in JS es un error que cualquier persona con experiencia en estas herramientas puede desmentir.

Si quieres poner en práctica estas ideas, prepara tu editor de código y experimenta con las distintas formas de integrar estilos en tus componentes. ¿Ya probaste alguna librería de CSS in JS? Comparte tu experiencia en los comentarios.