Hoy · Hoja de ruta
- 1. Aprende: El método para diagnosticar una página que se ve mal, en lugar de rehacerla.
- 2. Haz: Localiza y corrige los fallos de una hoja de estilos rota, explicando cada causa.
- 3. Comprueba: Puedes nombrar la causa de cada fallo, no solo la corrección.
Antes de empezar · 5 minutos, sin apuntes
- ¿Qué elegirías para una navegación, un catálogo y una página completa: flujo, Flexbox o Grid?
- ¿Qué hace que un componente sea realmente responsive?
- Predice por qué una regla puede aparecer tachada en DevTools.
Diagnosticar, no rehacer
Recibirás una página que se ve mal. La tentación es borrarlo todo y empezar de cero, y es exactamente lo que no vas a poder hacer en un trabajo: el CSS que te toque arreglar será de otro, tendrá años y funcionará en sitios que no puedes romper.
El método es el de la primera sesión:
- ¿Qué esperaba ver y qué veo?
- Inspeccionar el elemento concreto que falla
- ¿Qué reglas le llegan? ¿Cuáles están tachadas?
- ¿Es un problema de selector, de cascada, de caja o de layout?
- Corregir la causa, no el síntoma
El paso 4 es el que ahorra tiempo. Los cuatro tipos de problema se buscan en sitios distintos:
| Tipo | Síntoma | Dónde mirar |
|---|---|---|
| Selector | La regla no aparece en Styles | El nombre de la clase, la sintaxis, que el archivo cargue |
| Cascada | La regla aparece tachada | Especificidad y orden |
| Caja | El tamaño no es el que escribiste | Layout: box model, box-sizing, padding |
| Layout | Los elementos no se colocan bien | Los inspectores de Flexbox y de Grid |
Las cuatro pestañas
| Pestaña | Para qué |
|---|---|
| Elements | El árbol real, ya construido por el navegador |
| Styles | Las reglas que llegan al elemento, en orden, con las derrotadas tachadas |
| Computed | El valor final de cada propiedad, ya resuelto todo |
| Layout | El box model dibujado, y los inspectores de Grid y Flexbox |
Un procedimiento resuelve la mitad de los casos: en Styles, las casillas contiguas a cada declaración la desactivan en vivo. Desactivar propiedades una a una hasta que el problema desaparece te dice cuál era la culpable en veinte segundos, sin tocar el archivo.
Reto 4 · Quita el !important (10 min)
#main .listado div.card.producto {
margin-left: 37px !important;
}Esta regla funciona. Di tres cosas que están mal en ella, y cómo quedaría bien.
Ver respuesta del Reto 4
1 · El !important. Esconde un conflicto en vez de resolverlo, y obliga a que cualquier ajuste futuro sea otro !important.
2 · La especificidad. Un id, dos clases, dos elementos y una clase más: ese selector no se puede sobrescribir con nada razonable. Con .producto bastaría.
3 · El número mágico. 37px no sale de ninguna decisión: sale de mirar una pantalla. Colocar mediante margin-left es además síntoma de que falta un sistema de layout: si es separación entre elementos de una lista, es gap.
Quedaría en algo así como .producto { } sin margen, y un gap en el contenedor.
Tarea 17 · CSS forense
Recibirás una página cuya hoja de estilos contiene fallos deliberados de todos los tipos:
- La hoja no carga en una de las páginas.
- Un selector escrito con una errata, que no selecciona nada.
- Una regla con especificidad innecesaria que impide ajustar nada.
- Un
!importantpuesto para tapar el problema anterior. - Un elemento que desborda horizontalmente.
- Un
widthfijo en píxeles que rompe en móvil. - Un Grid con columnas fijas que genera pistas demasiado estrechas.
- Un Flexbox sin
flex-wrapcuyo contenido no cabe. - Una imagen deformada.
position: absoluteusado para maquetar una zona entera.- El foco invisible por un
outline: none. - Un color repetido catorce veces.
- Dos media queries que se contradicen.
Tu trabajo:
- Localiza los problemas.
- Clasifica cada uno en selector, cascada, caja o layout. Esa columna es la que se evalúa.
- Corrígelos atacando la causa.
- Explica las tres correcciones más importantes.
| Fallo | Tipo | Cómo lo detectaste | Causa real | Corrección |
|---|---|---|---|---|
Estoy atascado · no sé por dónde empezar
Por lo que afecta a más cosas. Si la hoja no carga en una página, todo lo demás que veas ahí es ruido: arréglalo primero y vuelve a mirar.
Después, los desbordamientos, porque suelen tener una única causa que produce muchos síntomas. En último lugar, los detalles de cascada, que son locales.
Regla general de la sesión: si la regla no aparece en Styles es de selector; si aparece tachada es de cascada. Esa distinción te ahorra la mitad del trabajo.
Antes de cerrar · 2 minutos, sin mirar
- ¿Qué distingue un problema de selector de uno de cascada?
- ¿Para qué sirven las casillas junto a cada declaración en Styles?
- ¿Por qué no se arregla una página rota rehaciéndola de cero?
Ver respuestas
1 · Si la regla no aparece en Styles, no ha seleccionado nada: es de selector o de sintaxis. Si aparece tachada, sí seleccionó y perdió: es de cascada.
2 · Para desactivar propiedades en vivo y localizar cuál causa el problema sin tocar el archivo.
3 · Porque en un trabajo real el CSS es de otro, tiene años y funciona en sitios que no puedes romper. El segundo motivo es que rehacer el código no identifica dónde estaba el defecto.