Estilizar una página web usando CSS con JavaScript, ¿es una buena idea?
Una página web se desarrolla a partir de código HTML, para determinar cómo estructurar la información. Unas hojas de estilo, para ayudar a mejorar la experiencia visual y código JavaScript para añadir interactividad y hacerla más dinámica.
Estos tres elementos bastan para crear cualquier tipo de página web. Sin embargo, cuando las aplicaciones empiezan a crecer de tamaño y hay múltiples programadores que trabajan sobre ella al mismo tiempo surgen varios problemas. Si nos centramos a los estilos CSS específicamente, nos encontraremos con:
En 2014, Christopher Chedeau frontend engineer de Facebook, listaba estos problemas y algunos más.
Para solucionar todos estos problemas se puede usar JavaScript como un lenguaje que describa los estilos de una forma declarativa, escalable y mantenible. Esto trae un conjunto de beneficios:
Existen algunos inconventientes al generar CSS con JS:
Pero el más importante es el de rendimiento. Hay que ejecutar el código JS para generar los CSS y insertarlo el DOM y esto no se puede hacer en el build time sino cuando el usuario carga la aplicación en el navegador. Esto puede entorpedecer métricas de Core Web Vitals al renderizar componentes de nuestra página.
Estas son las librerías más conocidas que puedes usar.
Veamos un ejemplo rápido de como se usaría styled components en React. Definimos los estilos dentro de JavaScript como si fuera un string.
const ButtonStyles = styled.a` padding: 0.8em 1em; color: white; background-color: ${ ({ primary }) => ( primary ? "#07d" : "#222" ) };`;
const App = () => { return ( <div> <ButtonStyles href="#">Texto</ButtonStyles> </div> );}
CSS en JS ofrece múltiplas ventajas, como evitar conflictos con nombres de clase, estilizar con CSS a nivel de componente y estilos dinámicos entre otros. Pero también trae algunas desventajas y no menores, como el empeoramiento del rendimiento del lado del cliente, la importación de librerías y el consecuente incremento de tamaño del proyecto.
Por lo tanto hay que valorar en qué tipo de aplicación es adecuado usarlo o no.