CSS-in-JS: características

En 2015, se lanzó una biblioteca de JavaScript llamada JSS (que aún se mantiene activa) que permitía a los desarrolladores utilizar JavaScript para describir estilos de manera declarativa, sin conflictos y reutilizable. JSS aplicaría automáticamente las propiedades declaradas a sus selectores respectivos una vez que se cargara la página. A medida que las bibliotecas de JavaScript en el frontend, como React, ganaban popularidad, surgieron soluciones de CSS-in-JS como styled-components. Tanto styled-components como bibliotecas de CSS-in-JS como Emotion permiten a los desarrolladores web escribir propiedades de CSS para componentes a través de JavaScript. En este tutorial de desarrollo web, presentaremos algunas de las características comunes de CSS-in-JS, así como sus fortalezas y debilidades. Al final, también sabrás qué buscar al decidir entre CSS-in-JS, bibliotecas de CSS como Less o SaSS, y el buen y viejo CSS básico.

¿Cómo funciona CSS-in-JS?

Como su nombre indica, CSS-in-JS permite a los programadores aplicar estilos a sus componentes escribiendo CSS directamente en su código JavaScript o TypeScript. Por supuesto, podrías hacerlo tú mismo definiendo una constante, como se muestra en el siguiente ejemplo de código:

const estilos = {
  background: "#FE0000",
  color: "#FFFFFF"
};

Luego, todo lo que necesitas hacer es pasarlo al elemento a través del atributo style, de esta manera:

<div style={estilos}>
  
</div>

Aunque no hay nada de malo en usar estilos inline de esta manera, este enfoque tiene limitaciones severas porque los objetos simples como estos carecen de muchas características útiles de CSS. Por esa razón, la mayoría de los desarrolladores eligen utilizar bibliotecas. Aquí tienes un ejemplo de un botón de React estilizado usando styled-components:

import React from "react";
import styled from "styled-components";

const BotonEstilizado = styled.button`
  width: 90px;
  height: 40px;
  background: ${props => props.activo ? "negro" : "gris oscuro"};
  color: azul;
`;

const Boton = () => (
  
    Mi Botón Estilizado
  
);

export default Boton;

Observa que podemos determinar valores dinámicamente basados en valores condicionales como props.

Las 5 mejores lenguajes de programación para administradores de bases de datos

Bibliotecas específicas de un framework vs. Bibliotecas independientes de un framework

Ahora que hemos establecido que vale la pena utilizar una biblioteca de CSS-in-JS, exploraremos los dos tipos predominantes: Bibliotecas específicas de un framework y Bibliotecas independientes de un framework.

Ciertas bibliotecas, como Radium y JSX, solo funcionan con un framework específico de JavaScript. Por ejemplo, Radium fue creado para aplicaciones de React, mientras que Styled JSX solo es compatible con componentes escritos en JSX (aunque también se puede utilizar con React).

No sorprende que las bibliotecas de CSS-in-JS específicas de un framework utilicen la misma sintaxis que el framework que admiten. Por ejemplo, Styled JSX utiliza plantillas literales dentro de la sintaxis JSX para agregar estilos CSS a los componentes. Aquí tienes un ejemplo de código de Styled JSX que crea un botón con estilos dinámicos:

const Boton = props => (
  
    {props.children}
    
  
)

Otras bibliotecas de CSS-in-JS como JSS, Emotion y Styled Components son independientes de un framework, lo que significa que puedes usarlas con cualquier framework basado en componentes o incluso con JavaScript básico. Otras bibliotecas, como Aphrodite, también funcionan con Web Components.

Aquí tienes un ejemplo de un Web Component que utiliza Aphrodite para establecer el color de fondo:

/* Registra un Web Component con fondo azul */
import { StyleSheet, css } from 'aphrodite';

const estilos = StyleSheet.create({
    azul: {
        backgroundColor: 'azul'
    }
});

class App extends HTMLElement {
    attachedCallback() {
        this.innerHTML = `

Esto es rojo.

`;
    }
}

document.registerElement('mi-app', App);

Ventajas de CSS-in-JS

Independientemente de la biblioteca que elijas, todas incluyen las siguientes características:

Cómo instalar Git en macOS: Guía paso a paso para principiantes

• CSS con alcance limitado: Todas las bibliotecas de CSS-in-JS generan nombres de clases CSS únicos. Además, todos los estilos se aplican solo al componente respectivo, lo que proporciona encapsulación sin afectar ningún estilo definido fuera del componente. Esto evita de manera elegante las colisiones de nombres de clases CSS, las guerras de especificidad y el tiempo que se necesita para encontrar nombres de clases únicos en toda la aplicación.
• Renderizado en el lado del servidor (SSR): Aunque el renderizado en el lado del servidor (SSR) no proporciona muchos beneficios en aplicaciones de página única (SPA), es extremadamente útil en sitios web o aplicaciones que necesitan ser analizados e indexados por motores de búsqueda, ya que estos requieren que las páginas y los estilos se generen en el servidor.
• Prefijos de proveedores automáticos: Todas las bibliotecas de CSS-in-JS proporcionan prefijos de proveedores de forma predeterminada. Esto ahorra mucho tiempo a los desarrolladores, ya que no tienen que averiguar qué características requieren un prefijo de proveedor en navegadores antiguos.

Inconvenientes de CSS-in-JS

CSS-in-JS ciertamente no está exento de inconvenientes. Ha habido varios casos en los que los desarrolladores de proyectos lo han abandonado a favor de enfoques de CSS más tradicionales. Aquí tienes un par de razones por las que sucede:

• Overhead en tiempo de ejecución: A medida que los componentes se renderizan, la biblioteca de CSS-in-JS debe convertir los estilos en CSS sencillo para insertarlos en el documento. Existe cierto debate sobre si esto puede tener un impacto perceptible en el rendimiento de la aplicación. Eso probablemente dependería de varios factores, desde la complejidad del código hasta el hardware.
• Tamaño más grande del paquete: Cada usuario que utiliza tu aplicación debe descargar el JavaScript de la biblioteca de CSS-in-JS. Emotion tiene un tamaño de solo 7.9 kB minificado y styled-components es de 12.7 kB. Para comparar, React + react-dom tienen un tamaño de 44.5 kB, por lo que una biblioteca de CSS-in-JS probablemente no sea la causa de un aumento significativo en el tamaño del paquete.

Consideraciones finales sobre CSS-in-JS

Este tutorial presentó algunas de las características comunes de CSS-in-JS, así como sus fortalezas y debilidades. Aunque CSS-in-JS ofrece muchos beneficios, no te precipites en adoptarlo solo porque todos tus amigos lo están haciendo. Asegúrate de evaluar todos sus pros y contras antes de tomar una decisión. Aunque CSS-in-JS podría ser exactamente lo que necesitas, también puede haber compensaciones que simplemente no estés dispuesto a aceptar.

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a CSS-in-JS: características , tenemos lo ultimo en tecnología 2023.