Description
Un agente de IA te va a entregar CSS que se ve perfecto en tu navegador y está roto en silencio en todas partes: una card medida con unos 340px mágicos que se rompen apenas el texto es más largo, un alto fijo que corta el contenido el día que una nota ocupa dos líneas, un dropdown enterrado bajo el header porque el z-index escaló hasta una guerra que nadie planeó, un !important apilado sobre otro !important para ganar una pelea de especificidad, un layout impecable a 1440 píxeles e inusable en un teléfono, texto gris sobre blanco que a vos se te lee bien y le falla a alguien que necesita contraste. La pantalla en el tamaño de tu ventana muestra los píxeles correctos, así que parece terminado. CSS renderiza casi cualquier cosa, porque renderizar prueba que el navegador parseó la regla, no que el layout aguante cuando el contenido, el viewport o la tipografía cambian por debajo. Copiar sintaxis de selectores no te sirve acá, no sos vos quien tipea las reglas. Lo que te falta es el modelo mental del revisor: qué están haciendo en realidad la cascada, el modelo de caja y el motor de layout, para poder leer un diff de CSS escrito por un agente y saber si va a producción o vuelve para atrás.
Este libro te entrena para ser el revisor de CSS vibe-codeado, no para memorizar propiedades. Arranca desde una premisa distinta a la de cualquier otro libro de CSS: el agente escribe los estilos, y tu palanca es entender qué hace ese CSS en realidad para poder revisarlo con el criterio que ningún linter tiene. Vas a aprender cómo la cascada decide qué regla gana y por qué las peleas de especificidad terminan en !important, qué cuenta el modelo de caja como ancho y por qué el padding te sorprende, cómo el flujo normal, flexbox y grid colocan cada uno una caja y dónde el agente elige el equivocado, qué le hacen el posicionamiento y los stacking contexts a un menú que desaparece detrás del header, por qué un píxel fijo se rompe en la próxima pantalla mientras las unidades relativas se doblan, cómo un layout que se ve bien en un viewport se desarma en otro, por qué una tipografía que todavía no cargó corre toda la página, y qué hace que un color sea legible y no apenas visible. Vas a aprender todo eso como lo necesita un revisor: leyendo hojas de estilo reales que el agente generaría para una sola interfaz que nos acompaña, un dashboard llamado Kanso, y decidiendo qué está bien, qué es plausible pero frágil y qué hay que devolver. La progresión va de juzgar una sola regla, a juzgar un componente como la card o la toolbar, a juzgar cómo se comporta todo un layout responsive con contenido largo, pantallas chicas y usuarios que no ven como vos. Acá casi no hay ejercicios de sintaxis y sí mucho sobre cómo se comporta CSS en realidad, dónde se rompe y las formas específicas en que el estilo de un agente sale mal. Para ingenieros que van a vibe-codear su CSS de todas formas y quieren ser los que cazan lo que se le escapó al modelo.
Para quién es este libro
Este libro es para: ingenieros que ya decidieron dejar que un agente de IA escriba su CSS (vibe coding) y ahora se quedan con la parte que el agente no puede hacer, que es juzgar si el estilo es correcto, robusto, responsive y accesible en cada pantalla que trae un usuario real, y que no piensan pasarse meses moliendo reglas de selectores y tutoriales de flexbox para llegar ahí.
Todos los capítulos, uno por uno
- Capítulo 1: El día que dejé de escribir CSS y empecé a revisarlo
- Capítulo 2: Por qué la caja es más ancha que el número que le pusiste
- Capítulo 3: Por qué tus dos cajas no se ponen una al lado de la otra
- Capítulo 4: La fila que se ve perfecta hasta que un item se hace largo
- Capítulo 5: Cómo armar un layout de verdad sin una pila de divs anidados
- Capítulo 6: El menú que se esconde detrás de todo lo demás
- Capítulo 7: Los 340 píxeles mágicos que se rompen en la próxima pantalla
- Capítulo 8: Se ve bien en mi laptop y se desarma en el teléfono
- Capítulo 9: Por qué el texto técnicamente está pero nadie lo puede leer
- Capítulo 10: El texto gris que pasa la revisión y le falla a un usuario real
- Capítulo 11: La animación que se ve suave y pierde todos los frames
- Capítulo 12: Cambió un color y hubo que editar cuarenta archivos
- Capítulo 13: La hoja de estilos que nadie puede tocar sin romper algo
- Capítulo 14: ¿Todavía necesito Sass ahora que CSS creció?
