Portal municipal con desbordamiento en móvil y Sass desordenado
El portal de un ayuntamiento tiene 14 secciones y un sistema de diseño en Sass con 22 parciales. El CSS compilado pesa 480 KB sin minificar, hay 38 declaraciones !important y el anidamiento llega a seis niveles. En una auditoría con móvil de 320 px, la página de noticias genera scroll horizontal: las tarjetas tienen width: 360px y un padding fijo de 24px; el menú hamburguesa queda oculto debajo del hero porque el contenedor usa position: absolute con height fija. La tabla de tasas municipales, con 7 columnas, no se puede leer en móvil. El LCP es 4,2 s y el CLS 0,31. La accesibilidad exige WCAG 2.1 AA, zoom al 200 % y soporte de los dos últimos años de navegadores. No se puede modificar el HTML de dos secciones por contrato, pero sí el CSS. El equipo discute si migrar a Bootstrap o reescribir el Sass; hay dos semanas antes de las elecciones y no se pueden introducir imágenes nuevas.
1. Diagnostica la causa del scroll horizontal y propón una corrección con CSS que respete el zoom al 200 %.
Read the worked answer
El scroll horizontal no se arregla con overflow-x: hidden en body, porque solo oculta el síntoma y puede romper el zoom. La causa es dimensional: .tarjeta { width: 360px; padding: 24px; } sin box-sizing: border-box ocupa 408 px y desborda 320 px. Corrección: * { box-sizing: border-box; }, width: 100%; max-width: 360px; y padding con clamp(); revisar imágenes y tablas con max-width:100%. El menú absoluto queda debajo porque el hero tiene altura fija; usar flujo normal o position: sticky y z-index controlado. Validar a 320 px y zoom 200 % con las DevTools; no usar overflow: hidden global salvo contención local justificada.
2. ¿Cómo resolverías la tabla de 7 columnas y qué estrategia responsive adoptarías sin tocar el HTML de dos secciones?
Read the worked answer
Para la tabla de 7 columnas: en pantallas estrechas, envolverla en un contenedor con overflow-x: auto, tabindex='0', role='region' y aria-label, manteniendo caption; o transformarla en tarjetas con display:block y data-label en cada celda, sin duplicar contenido. No ocultar columnas con display:none si son necesarias.
Estrategia: mobile-first, breakpoints basados en contenido (no en dispositivos), Grid repeat(auto-fit, minmax(16rem, 1fr)), clamp() para tipografía y min-height en imágenes para bajar CLS. Migrar a Bootstrap no resuelve el contrato de HTML y añade peso; mejor un sistema propio mínimo. El zoom 200 % se prueba con navegador, no solo con emulación. En las dos secciones bloqueadas, aplicar los cambios solo desde CSS usando selectores existentes y utilidades.
3. Propón un plan de refactorización de Sass para reducir el bundle y eliminar los !important, justificando si conviene adoptar Bootstrap en dos semanas.
Read the worked answer
Refactorizar Sass sin reescribir todo: arquitectura 7-1 o ITCSS, @use en lugar de @import, tokens en _variables, mixins para breakpoints, anidamiento máximo 2–3 niveles y prohibir !important salvo utilidad documentada. Eliminar parciales muertos con auditoría de cobertura; compilar con sass --style=compressed y autoprefixer según browserslist. Separar base, layout, components, utilities. Medir el bundle antes y después; 480 KB es excesivo para 14 secciones y parte es duplicación.
No adoptar Bootstrap en dos semanas: introduce otra capa de estilos, no elimina la deuda y puede chocar con el HTML contractual. La prioridad es reducir especificidad, no añadir dependencias. Documentar los tokens y dejar una guía breve para que el equipo no vuelva a anidar seis niveles.