Recientemente salí a cenar con unos amigos que trabajan en frontend y, mientras charlábamos, salió el tema de la IA escribiendo código. Uno de ellos comentó que ahora, usando Copilot o Cursor, en unos minutos puedes armar la estructura de una página, e incluso te escribe la lógica de paso. Otro respondió: "Sí, pero cada vez que recibes CSS escrito por otra persona o generado por IA, te duele la cabeza: la indentación está tan desordenada como si un gato la hubiera arañado, si hay un espacio de más o de menos es pura suerte, a veces te ponen cientos de caracteres en una sola línea y para encontrar un valor de color tienes que buscar con Ctrl+F durante un buen rato."
Con esto me siento totalmente identificado. La IA ciertamente ha acelerado mucho la escritura de código, pero en el caso del CSS, a menudo lo que hace es complicarte la vida. ¿Por qué? Porque cuando la IA genera CSS, solo le importa que "funcione", no le importa en absoluto cómo lo vas a mantener después. Si le pides un diseño responsive, te escribe las media queries, pero la anidación de selectores, el orden de las propiedades, los saltos de línea y la indentación dependen de su humor en ese momento. El resultado es que copias y pegas en el proyecto, el estilo del código no encaja con las normas del equipo y en el code review tus compañeros te critican sin piedad.
En ese momento tienes que arremangarte y arreglar el desastre tú mismo. Antes también intenté ajustarlo manualmente, línea por línea, corrigiendo la indentación, eliminando espacios sobrantes, expandiendo el código comprimido y fusionando el código disperso. Después de media hora, tenía los ojos cansados y, por un descuido, cambié mal el valor de una propiedad y la página se rompió directamente. Luego aprendí la lección y usé herramientas directamente.
El formateo y la compresión de CSS, aunque parezcan lo mismo, en realidad van en dos direcciones. El formateo consiste en expandir de nuevo el código comprimido y apelotonado, añadiendo una indentación y saltos de línea razonables para que sea legible; la compresión es lo contrario, eliminar todos los espacios, saltos de línea y comentarios que se puedan borrar para que el archivo ocupe lo menos posible y cargue más rápido. Estas dos operaciones, hacerlas a mano es pura autotortura.
Ahora uso una herramienta online de formateo y compresión de CSS. No hace falta instalar software, abres la página web, pegas el código y pulsas un botón: a la izquierda está el código original y a la derecha el resultado procesado. Si quieres formatear, eliges el modo formateo y automáticamente te ordena el código de forma impecable: una línea en blanco entre selectores, dos espacios de indentación delante de las propiedades, un espacio después de los dos puntos, se ve muy cómodo. Si quieres comprimir, cambias al modo compresión, elimina los comentarios, borra los saltos de línea, se come los espacios sobrantes y al final te da una línea de código compacta que puedes lanzar directamente a producción sin problema.
Lo clave es que esta herramienta no es exigente. El código que copias de la IA, por desordenado que sea, te lo ordena. A veces cojo CSS de proyectos de código abierto de GitHub, con estilos muy variados: algunos usan Tab, otros espacios, algunos tienen el orden de propiedades hecho un caos; lo meto y tras pasarlo sale con un estilo unificado, ahorrándome no sé cuántas molestias.
Alguien podría decir: ¿acaso el editor no trae formateo incorporado? Cierto, VS Code tiene Prettier y WebStorm también lo trae integrado. Pero el problema es que no todo el mundo tiene el entorno configurado; a veces estás en el ordenador de otra persona haciendo un cambio temporal, o escribes código en un IDE online, y no es tan cómodo. Además, la configuración de Prettier a veces también es un lío, cambia según el proyecto y, si te descuidas, después de formatear da errores. Las herramientas online no tienen esos problemas: abres, usas y te vas.
Hay otro punto: que la IA escriba código cada vez más rápido significa que también tenemos cada vez más oportunidades de recibir código de otros. Antes un proyecto quizá lo escribían solo unas pocas personas; ahora, con la IA participando, el estilo del código es aún más incontrolable. En ese momento, una herramienta práctica de formateo y compresión es como el fregadero de la cocina: parece que no llama la atención, pero sin ella no se puede vivir.
En definitiva, la IA está para ayudarte a trabajar, no para ordenarte la casa. Puede escribir la funcionalidad, pero lo de que el código esté limpio depende de que tú le pongas atención. En lugar de perder tiempo peleándote con CSS desordenado, mejor busca una herramienta fiable y resuélvelo en unos segundos. El tiempo que ahorras, ¿no es mejor para tomarte un café o escribir dos componentes más?