INFOTEP Técnico en Programación de Páginas Web: CSS3: maquetación, responsive design y preprocesadores

Este dominio mide tu capacidad para controlar el modelo de caja, resolver la cascada y la especificidad, maquetar con Flexbox y Grid, adaptar la interfaz con media queries y usar un preprocesador como Sass sin perder de vista que el navegador solo entiende CSS compilado.

Cascada, especificidad y caja

Orden de aplicación: origen e importancia, especificidad y orden de aparición. En caso de empate gana la regla posterior.
Especificidad aproximada: estilos en línea 1000; ID 100; clase, atributo y pseudoclase 10; elemento y pseudoelemento 1. .card a vale 0,1,1 y #menu a vale 1,0,1, así que el segundo gana.
box-sizing: border-box incluye padding y borde en el ancho declarado; evita desbordes frente al valor por defecto content-box.
!important rompe la cascada y dificulta el mantenimiento; se reserva para utilidades muy justificadas.

Maquetación y responsive

Flexbox distribuye en un eje; Grid define filas y columnas. display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem crea una rejilla fluida sin media queries.
Enfoque mobile-first: estilos base para móvil y @media (min-width:768px) para ampliar. El orden de las media queries importa.
No olvides meta name=viewport; sin él, el móvil simula un ancho de escritorio.
Imágenes fluidas con max-width:100%; height:auto.

Preprocesadores

Sass aporta variables, anidamiento, mixins, funciones y parciales que se compilan a CSS. El navegador no ejecuta .scss. El anidamiento profundo genera selectores largos y frágiles; conviene limitarlo. @use sustituye al antiguo @import de Sass.

Ejemplo trabajado

Rejilla de tarjetas: .grid{display:grid;grid-template-columns:1fr;gap:1rem} y @media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}. Razonamiento: la base apila las tarjetas en una columna para pantallas pequeñas; a partir de 768 px se muestran tres columnas. Se usa min-width porque es mobile-first y el breakpoint se aplica hacia arriba. Si se hubiera escrito max-width, el orden de reglas cambiaría el resultado.

Errores que cuestan puntos

Olvidar box-sizing; abusar de !important; confundir especificidad con orden; poner media queries antes de los estilos base; creer que Sass se ejecuta en el navegador; anidar selectores hasta generar .card .body .text span a; fijar alturas en píxeles que rompen el contenido.