La tendencia actual de CSS: StyleX

¿Qué es StyleX?

StyleX es una tecnología, concretamente podría decirse que es un sistema de estilizado para la creación de apps/páginas/sistemas web. Esta tecnología fue creada por Meta allá por el año 2023 justamente para sus aplicaciones, ya que como puedes imaginarte Facebook, Instagram y demás apps son muy grandes y complejas, por lo que requerían algo más para poder mantenerlas y escalar. Actualmente cobra más relevancia por la IA, ya que una de sus ventajas es que se lleva muy bien con esta.

Sus principales características serían:

• Compilación a CSS estático: a diferencia, por ejemplo, si conoces styled-components o emotion, que estas son librerías que funcionan en tiempo de ejecución (runtime), StyleX “compila” los estilos cuando se hace el build, es decir que una vez que mandas tu app a producción, es en este instante donde se extraen y procesan los estilos a un archivo .css
• Manejo de conflictos: resuelve un problema típico con CSS, que es el problema de especificidad, o sea de qué importancia tiene cada estilo para su sobrescritura.
• Seguridad de tipado: para mí, que uso para todo TypeScript, esto es excelente para asegurar que se escribe correctamente una clase, porque hay veces que quizá escribes mal una propiedad y no hay forma de asegurarte más que de puro ojo.
• Diseñado para reutilizarse: facilita la creación y reutilización de estilos para los componentes porque evitas colisión de nombres.
• Atómico: es decir que una clase hace una cosa .abc123 { margin: 4px; }. Esto reduce drásticamente la duplicación de propiedades y el tamaño del archivo CSS, porque en toda tu app puedes haber puesto 100 veces margin:4px y solo existirá una vez en el archivo final.

Y si tenemos que usar 5 palabras, serían: Escalable, Predecible, Componible, Rápido y Type-Safe (esto según la documentación oficial)

Ejemplo básico

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

// Definición de estilos
const styles = stylex.create({
  button: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '4px 8px',
    borderRadius: '6px',
    border: '1px solid #ddd'
  },
  primary: {
    backgroundColor: 'purple',
  },
});

export function Button({ isPrimary }) {
  return (
    <button 
      {...stylex.props(styles.button, isPrimary && styles.primary)}
    >
      Click me
    </button>
  );
}

Como puedes ver es todo JavaScript, y sinceramente a mi parecer lee mejor que definiéndolo todo como un string (TailwindCSS)

import { clsx } from 'clsx'; // o clsx + tailwind-merge

export function Button({ isPrimary }) {
  return (
    <button
      className={clsx(
        'bg-blue-600 text-white py-1 px-2 rounded-md border border-[#ddd]',
        isPrimary && 'bg-purple-600'
      )}
    >
      Click me
    </button>
  );
}

Es más corto usar Tailwind, pero propenso a errores.

Comparativa

¿Entonces es mejor StyleX?

Sí y no, como todo en esta área, depende.

StyleX vale la pena cuando:

• Tu proyecto usa TypeScript.
• Mantienes un sistema de diseño o una biblioteca de componentes reutilizables.
• Los componentes necesitan sobrescrituras de estilos tipadas y predecibles.
• Te importa el bundle CSS final o las declaraciones duplicadas se han vuelto un problema.
• Proyecto grande, es decir varios equipos desarrollan dentro de una misma aplicación y cada vez resulta más difícil hacer cumplir las convenciones globales de CSS.
• Prefieres mantener los estilos junto a los componentes, pero no quieres inyección de estilos en tiempo de ejecución en producción.

Probablemente sea innecesario cuando:

• El sitio es pequeño y el CSS tradicional ya es fácil de entender y mantener.
• Prefieres HTML semántico y una arquitectura basada principalmente en CSS.
• Tu stack no puede integrar cómodamente el compilador de StyleX (esto es un caso especial, pero podría pasar).
• Dependes mucho de selectores libres, del comportamiento global de la cascada o de JavaScript arbitrario dentro de las definiciones de estilos.
• Quieres migrar porque todo mundo habla de esta tecnología y de que proviene de Meta.

Ideas/Opiniones finales

Este tweet de Jared Palmer resume bastante bien por qué StyleX está sonando ahora, sobre todo con la IA:

Jared Palmer @jaredpalmer

After about a ~decade with atomic CSS frameworks (BuzzFeed Solid, Basscss, and then finally Tailwind), I think I'm convinced now that Stylex is superior for agents.

Stylex constraints lead to greater consistency and correctness as your codebase grows. I do still think Tailwind is the ideal human DSL for styling, but in a world where I'm barely touching CSS/class names by hand, the tradeoffs have changed. Again, if I were still hand writing code, Tailwind still wins, but we're not doing that anymore.

Para mí tiene razón. Hoy en día, con la IA, ya es normal que la gente ya no escriba código por sí misma; ya todo lo delegan a una IA. Y a diferencia de Tailwind, con StyleX uno puede tener más seguridad de si la IA hizo bien su trabajo o no, porque ya te mostraría explícitamente un error si se escribe algo mal.

Es emocionante cómo cada día salen nuevas cosas, y cómo va mejorando la tecnología. Para mí, usar StyleX podría ayudar en proyectos grandes, donde sé que quizá el proyecto crecerá mucho, que necesite escalabilidad y donde posiblemente se usará IA. Para proyectos pequeños seguiría usando Tailwind.

Sí, se han visto mejoras considerables en proyectos que migraron de X tecnología a StyleX, pero siempre, al migrar o iniciar un proyecto, se debe revisar muy bien si vale la pena o no.