StyleX: La Librería CSS de Facebook Que Deberías Aprender en 2024

Es bien sabido que el mundo del desarrollo web está en constante cambio y la gestión eficiente de estilos es fundamental para la creación de aplicaciones modernas y escalables. En este contexto, surge StyleX como una revolucionaria herramienta que combina la experiencia del desarrollador de las bibliotecas CSS-in-JS con la eficiencia y escalabilidad del CSS estático. En este artículo, exploraremos en profundidad qué es StyleX, sus ventajas, cómo funciona y cómo Meta, la empresa detrás de Facebook, lo utiliza para potenciar la estilización de sus aplicaciones web.

¿Qué es StyleX?

StyleX representa una evolución en las bibliotecas CSS-in-JS al utilizar herramientas de tiempo de compilación para unir la experiencia del desarrollador con el rendimiento del CSS estático. Toma lo mejor de las bibliotecas CSS-in-JS y lo mezcla con el poder del CSS estático. ¿Para qué? Para hacer que la creación de estilos en aplicaciones grandes y complejas sea más fácil y rápida.

Este nuevo sistema de estilos ofrece un conjunto expresivo de CSS, evitando conflictos de especificidad y facilitando la gestión de estilos a través de fronteras de archivos y componentes.

Ventajas de StyleX

• Rápido: StyleX se mueve a la velocidad del rayo, tanto cuando compilas tu código como cuando se ejecuta. No ralentiza tu aplicación.
• Escalable: ¿Tu aplicación es enorme? No hay problema. StyleX puede manejar grandes cantidades de código sin despeinarse, reduciendo el tamaño de tus estilos automáticamente.
• Previsible: Olvídate de problemas de colisiones en tus estilos. StyleX maneja la situación para que siempre obtengas el resultado esperado.
• Componible: Es fácil mezclar y combinar estilos con StyleX. Puedes aplicar estilos de un lugar a otro sin líos.
• Seguro de Tipos: Evita errores al escribir tus estilos. StyleX te ayuda a mantener todo en orden y bien tipado.

¿Cómo Funciona StyleX?

StyleX utiliza una magia llamada “tiempo de compilación” para convertir tus estilos en algo que las computadoras adoran. Se asegura de que todo esté listo antes de que tu aplicación se ejecute, eliminando cualquier demora no deseada.

Es un sistema de estilos que combina múltiples herramientas:

Plugin de Babel

El componente esencial de StyleX, este plugin opera durante el tiempo de compilación. Identifica y extrae estilos del código fuente, convirtiéndolos en nombres de clases atómicos. Este proceso garantiza que los estilos estén listos antes de que la aplicación se ejecute, eliminando la carga de trabajo en tiempo real.

Biblioteca de Tiempo de Ejecución

Un conjunto de funciones livianas que opera durante la ejecución de la aplicación. Su función principal es combinar y optimizar nombres de clases cuando es necesario, asegurando un rendimiento rápido.

Plugin ESlint

Colaborando con el ecosistema de herramientas, el plugin ESlint ofrece validaciones específicas para garantizar que los estilos cumplan con las mejores prácticas y estándares del código.

Integraciones con Bundlers y Frameworks

StyleX se integra con varios bundlers y frameworks, garantizando una armoniosa colaboración con las herramientas existentes en el flujo de trabajo del desarrollador.

Creando estilos con StyleX

Los estilos deben crearse con la funcion stylex.create. Puedes definir uno o más nombres u objetos de estilos con el nombre que desees. En el siguiente ejemplo, hay dos “espacios de nombres”: uno llamado base y el otro highlighted.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

Veamos como podemos utlizar estos estilos en un elemento h1:

export default function Button() {
  return (
    <h1{...stylex.props(styles.base, style.highlighted)}>
      h1 element
    </h1>
  );
}

Pseudo-clases

Las pseudo-clases representan diferentes estados de un elemento. En StyleX la declaración de las pseudo-clases se pueden anidar dentro de las propiedades.

Por ejemplo, si queremos agregar pseudo-clases a un botón que tiene como color de fondo “lightblue”, representaremos la propiedad backgroundColor como un objeto de pseudo-clases, donde declararemos el color de fondo por defecto con el nombre default y la pseudo-clase ‘:hover‘ para el color que queremos que cambie cuando pasemos el cursor por encima:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  button: {
    backgroundColor: {
      default: 'lightblue',
      ':hover': 'blue',
    },
  },
});

Pseudo-elementos

Para apuntar a pseudo elementos en StyleX, estos deben definirse como una clave de nivel superior dentro de un espacio de nombres.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  input: {
    // pseudo-element
    '::placeholder': {
      color: '#999',
    },
    color: {
      default: '#333',
      // pseudo-class
      ':invalid': 'red',
    },
  },
});

Media Queries

Las media queries se pueden comportar de forma similar a las condiciones dentro de los valores de estilos:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    width: {
      default: 800,
      '@media (max-width: 800px)': '100%',
      '@media (min-width: 1540px)': 1366,
    },
  },
});

Aprende más sobre StyleX 👉 aquí