Publicado el 9 de noviembre
¿Por qué CSS es tan difícil de entender para las IA generativas?
CSS es una de esas cosas que parecen sencillas hasta que realmente intentas razonar sobre ellas. Muchas personas consideran que CSS es un lenguaje fácil de aprender, pero, de alguna manera, los modelos de lenguaje grandes (LLMs) capaces de resolver problemas de cálculo aún se ven derrotados por unas pocas líneas de CSS.
En este artículo, compartiré mis pensamientos sobre por qué las IA generativas tienen dificultades para crear buenos diseños, y cómo TailwindCSS les ayuda a superar este desafío.
Imaginemos que estamos usando CSS de la manera en que la web lo diseñó originalmente: con un archivo CSS separado, selectores definidos y una hoja de estilos vinculada. En esta configuración, analicemos la naturaleza de CSS.
1. Todo depende del contexto
En CSS, una sola regla como position: relative puede alterar completamente el diseño e incluso el comportamiento de todas las demás propiedades. Por lo tanto, una sola línea puede comportarse de muchas maneras diferentes, dependiendo de dónde se use.
Por diseño, es imposible mirar una sola parte de un archivo CSS y predecir exactamente lo que verás en el navegador.
Para cualquier propiedad de diseño, necesitas entender su contexto de apilamiento, bloque contenedor, modo de diseño, modo de escritura, dirección, y la lista continúa.
Estas relaciones ocultas son tan complejas que muchos desarrolladores ni siquiera son conscientes de ellas. A menudo terminamos “arreglando” el diseño mediante prueba y error, jugando con propiedades hasta que algo finalmente funciona.
¡Ahora, hagámoslo aún peor!
2. CSS nunca cuenta toda la historia
Un archivo CSS solo te da la mitad del contexto.
Puedes leer todos los selectores y propiedades que quieras, pero hasta que veas el HTML, no tendrás idea de cómo esos estilos realmente se conectan con los elementos reales.
Es como intentar entender una película leyendo sus subtítulos desordenados. La información está ahí, pero completamente fuera de contexto. O incluso peor. Debido a la naturaleza en cascada de CSS, incluso las partes que crees que conoces podrían cambiar más adelante.
3. No hay una única forma correcta de escribir CSS
Por favor, lee el siguiente párrafo con cuidado, cada palabra importa.
CSS es un lenguaje declarativo, en constante evolución y en cascada, moldeado por una comunidad abierta, e implementado por navegadores que cada uno tiene sus propias prioridades y no pueden permitirse cambios que rompan la compatibilidad. No es lo suficientemente abstracto como para expresar directamente las intenciones de diseño.
Por eso hay tantas formas de centrar un div.
Más allá de las innumerables formas de lograr el mismo resultado, también existen tantas metodologías para escribir CSS en sí mismo. ¿Alguna vez te has encontrado con BEM, SMACSS, OOCSS, CSS atómico, etc.? Si no, puedes agregar la tuya a la lista.
La mezcla interminable de técnicas, convenciones y metodologías significa que no hay una forma universal de razonar sobre CSS en todos los proyectos. Cada equipo tiene su propio estilo, y eso añade al caos, especialmente para los LLMs.
Caos
Ahora, combina los tres problemas:
- Comportamiento dependiente del contexto
- Falta la mitad de la historia
- Sin estructura ni convenciones consistentes
CSS se convierte en un rompecabezas impredecible de dependencias, anulaciones y contexto invisible. Para un modelo de lenguaje que depende de patrones y relaciones claras, “es una pesadilla”.
Pero las IA generativas no son tan malas. ¿O sí?
La contribución subestimada de Tailwind
En mi opinión, Tailwind CSS es el héroe subestimado de la era de la IA. Trae orden al caos y ofrece a las máquinas una forma predecible de razonar sobre el estilo. Aquí está por qué:
- Colocación conjunta de estructura y estilo: Proporciona contexto completo en un solo lugar.
- Opinado: un conjunto pequeño y consistente de utilidades significa que no hay que adivinar ni inventar convenciones. Esto puede formar patrones repetitivos.
- Salida predecible: cada clase hace una sola cosa, sin efectos en cascada inesperados.
Esa previsibilidad es exactamente lo que hace que Tailwind sea amigable para los LLMs. Así que la próxima vez que le pidas a una IA que te construya una página web, simplemente di “usa Tailwind”. Lo más probable es que ya lo iba a hacer de todos modos. 
Gracias por leer 