¿Qué es “CSS-in-JS”?

Es una técnica de estilización mediante la cual se define el CSS en los archivos JavaScript en los que se desarrollan los componentes, es decir, se evita el uso de archivos .css. Esta técnica se popularizó con la aparición de librerías o “frameworks” basados en componentes como React, Vue o Angular.

¿Cómo usar “CSS-in-JS”?

Para poder empezar a estilizar tus componentes con “CSS-in-JS” lo que tienes que hacer es instalar una de las múltiples librerías a tu disposición. Algunas de estas son styled-components, JSS, emotion, etc.

Dependiendo de la librería que decidas utilizar la implementación se llevará a cabo de una forma u otra, en este caso vamos a ver un ejemplo de estilización con styled-components:

import React, { useState } from "react";
import { colors } from "styles";
import styled from "styled-components";

const Button = styled.button(() => ({
  background: colors.yellow,
  color: colors.black,
  textAlign: "center",
  maxWidth: "300px",
  padding: "10px 20px",
  margin: "0 auto",
  fontWeight: 600,
  lineHeight: "19px",
  cursor: "pointer",
}));

function CTA({ text = "Buy Now!" }) {
  return <Button>{text}</Button>;
}

¿Qué desventajas aporta el “CSS-in-JS”?

1. Variedad: Como se ha comentado en el punto anterior, existen múltiples opciones entre las que elegir, el CSS es simplemente eso, creas un archivo y empiezas a escribir. En cambio, si quieres empezar a usar “CSS-in-JS” tienes que elegir entre una de las opciones disponibles.

2. Curva de aprendizaje: Una vez elegida una librería tienes que aprender a usarla, revisar su documentación e invertir ese tiempo.

3. Código más complicado de leer: Algunos programadores opinan que el usar este tipo de librerías hace que sean más complicados de leer los archivos de componentes.

¿Y qué ventajas aporta el “CSS-in-JS”?

Son muchas las ventajas que aportan este tipo de librerías, pero algunas de las más importantes son:

1. Dinamismo: Con dinamismo me refiero a que los estilos de un cierto componente reaccionen dependiendo del estado del mismo. Aún usando las propiedades más avanzadas con las que nos provee CSS3 no podemos llegar a realizar algo así, para lograrlo tendríamos que usar técnicas como aplicar una clase u otra a ciertos elementos dependiendo el estado, veamos un ejemplo:

// Versión CSS-in-JS / CTA.js

import React, { useState } from "react";
import { colors } from "styles";
import styled from "styled-components";

const Button = styled.button((props) => ({
  background: props.specialOffer ? colors.pink : colors.yellow,
  color: props.specialOffer ? colors.green : colors.black,
  textAlign: "center",
  maxWidth: "300px",
  padding: "10px 20px",
  margin: "0 auto",
  fontWeight: 600,
  lineHeight: "19px",
  cursor: "pointer",

  "&:disabled": {
    cursor: "default",
    opacity: 0.7,
  },
}));

const CTA = ({ text = "Buy Now!", isSpecialOffer }) => {
  const [isActive, setIsActive] = useState(true);

  return (
    <Button disabled={!isActive} specialOffer={isSpecialOffer}>
      {text}
    </Button>
  );
};

export default CTA;

/* Versión CSS / styles.css */

:root {
  --neo-yellow: #fcff51;
  --neo-pink: #ff7373;
  --neo-green: #60bfb9;
  --neo-black: #0c0c0c;
}

.cta-base {
  background: var(--neo-yellow);
  color: var(--neo-black);
  text-align: center;
  max-width: 300px;
  padding: 10px 20px;
  margin: 0 auto;
  font-weight: 600;
  line-height: 19px;
  cursor: pointer;
}

.cta-base.special-offer {
  background: var(--neo-pink);
  color: var(--neo-green);
}

.cta-base:disabled {
  cursor: default;
  opacity: 0.7;
}

// Versión CSS / CTA.js

import React, { useState } from "react";
import { colors } from "styles";
import styled from "styled-components";

const CTA = ({ text = "Buy Now!", isSpecialOffer }) => {
  const [isActive, setIsActive] = useState(true);

  return (
    <button
      disabled={!isActive}
      className={`cta-base ${isSpecialOffer ? "special-offer" : ""}`}
    >
      {text}
    </button>
  );
};

export default CTA;

2. “Scope” local: Por defecto, CSS no permite clases de ámbito local, por lo que tú, como desarrollador, tienes que estar muy atento de no repetir clases (sobreescribiendo así las ya existentes) o de editar los estilos mirando a un componente y no dándote cuenta de los cambios que has realizado a los demás elementos que contienen esa clase. El uso de “CSS-in-JS” permite que estas librerías realicen clases dinámicamente dependiendo del componente en el que estén llamándose, creando así módulos y evitando que los estilos se puedan sobreescribir y causar errores de estilización.

3. Reutilización: Estos estilos pueden estar alojados en archivos aparte, como si se tratase de un componente más, y ejecutarse las veces que se quiera. Esto permite que estos estilos solamente se tengan que definir una sola vez y utilizarse todas las que se desee.

Desmontando los contras

1. Variedad: Hoy en día, como programadores, estamos acostumbrados a que aparezcan nuevas tecnologías o técnicas constantemente. Echarles un vistazo no nos debería suponer un problema.

2. Curva de aprendizaje: Si usar esta tecnología nos aporta tantas ventajas, la curva de aprendizaje no debería de ser un impedimento, ya que si somos capaces de aprender a usar librerías como Redux, podemos aprender a usar otras mucho más simples como styled-components. Tal como hemos visto en los ejemplos anteriores, la implementación de una estilización no se aleja de nada que no hayamos hecho ya en JavaScript, sobre todo si hemos programado en React, la notación nos resulta familiar de los ya conocidos “in-line styles”.

3. Código más complicado de leer: Estoy en completo desacuerdo con esta “desventaja”. Para mi ver los estilos localizados en el mismo archivo .jsx en el que tenemos localizado nuestro componente, es una enorme ventaja. Esto te aporta contexto al código y permite que puedas entender al momento qué elementos del componente están estilizados y cómo.

Conclusión

Todas las formas de estilizar son válidas siempre y cuando se tenga un sistema y un orden. Pero si ciertas tecnologías nos aportan facilidades para nuestro entorno específico de trabajo, mejor usarlas.