GitHub completó en junio de 2026 la puesta en funcionamiento de todo su sitio con CSS Modules, poniendo fin a su dependencia de CSS-in-JS, incluidos styled-components, styled-system y las propiedades sx. La empresa afirma que esta transformación redujo el tiempo de renderizado del lado del servidor en un 55 %, además de disminuir en un 25 % el tiempo necesario para inicializar los componentes en la página.
La medida respondió al crecimiento del número de componentes en algunas páginas de GitHub desde 2023. La solución anterior requería inicializar los estilos en el cliente y aumentaba el coste de recopilar los estilos durante el renderizado del lado del servidor, además de dificultar las actualizaciones de formato a medida que aumentaba el número de componentes en la página.
¿Por qué eligió GitHub CSS Modules?
CSS Modules permite escribir los estilos en archivos CSS adyacentes al código fuente del componente, haciendo que los nombres de las clases sean locales de forma predeterminada para reducir las colisiones. Lo más importante en este caso es que elimina la necesidad de comportamiento en tiempo de ejecución en el cliente o el servidor, ya que los estilos se compilan en archivos CSS que se envían con el HTML de la página.
El proceso de migración comenzó con el sistema de diseño Primer. El equipo añadió archivos CSS Modules para cada componente y vinculó los componentes a banderas de funcionalidades que permitían alternar entre el método antiguo y el nuevo; después utilizó pruebas de regresión visual para verificar que los resultados coincidieran. A continuación, la implementación se amplió gradualmente del equipo de Primer al personal de GitHub y, posteriormente, a todos los usuarios.
Para diciembre de 2024, todos los componentes de Primer habían migrado a CSS Modules. Sin embargo, eso no era suficiente, porque grandes partes de la base de código de GitHub todavía utilizaban la propiedad sx para personalizar los componentes mediante objetos integrados. Aunque este método ofrecía una buena integración con TypeScript y los tokens de diseño, su naturaleza dinámica elevaba el coste de ejecución y dificultaba la ampliación a medida que aumentaba el número de componentes.
Gestionar la transición a gran escala
Para evitar romper los usos existentes, GitHub creó una biblioteca intermedia llamada @primer/styled-react. Esta biblioteca permitió seguir utilizando sx con los componentes migrados a CSS Modules, mientras que las rutas que no necesitaban sx podían importar directamente desde @primer/react.
El proceso de eliminación de sx comenzó en abril de 2025, cuando había aproximadamente 7.760 usos de esta propiedad. Con la ayuda de una extensión interna para VS Code y una herramienta codemod, un grupo de ocho ingenieros migró 6.419 usos en seis meses, con mejoras en el tiempo de renderizado del lado del servidor de entre el 1 % y el 22 % en algunas páginas. En abril de 2026, la cifra pasó de 895 a cero en tres semanas, con la participación de dos ingenieros y el uso de agentes de programación en GitHub Copilot.
Las apariencias visuales siguieron siendo un desafío adicional, ya que GitHub admite siete temas, cada uno con un modo de alto contraste, y algunas partes de este sistema estaban vinculadas a styled-components. Por ello, el equipo también migró los usos de JavaScript y las herramientas de temas, manteniendo las variables de color definidas en CSS.
¿Qué significa la experiencia para los desarrolladores?
Las cifras de GitHub muestran que eliminar la lógica de estilos en tiempo de ejecución puede generar mejoras tangibles cuando las interfaces de usuario crecen considerablemente. Sin embargo, el valor más importante de la experiencia no es la elección de CSS Modules en sí, sino la forma de ejecución: compatibilidad gradual, banderas de funcionalidades, pruebas visuales, implementación progresiva y automatización revisable.
Al mismo tiempo, el proceso revela que migrar desde CSS-in-JS no se limita a sustituir el formato de escritura de los estilos. Fue necesario eliminar las propiedades sx, desvincular los temas de styled-components y mantener la compatibilidad de los componentes durante un periodo prolongado. Por tanto, los resultados no demuestran que todos los proyectos obtendrán las mismas mejoras; estas están relacionadas con el tamaño de GitHub, la estructura de sus componentes y la forma en que utiliza los estilos dinámicos.