★★★★★ Junior → Senior 🔥 Fundamental
Cascade, specificity e inheritance La cascade decide qué declaración gana usando origen, importancia, capas, especificidad y orden.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender La cascade decide qué declaración gana usando origen, importancia, capas, especificidad y orden.
Cómo funciona La especificidad no es una puntuación decimal. @layer permite controlar precedencia sin aumentar selectores.
Ejemplo @layer base, components;
@layer base { .button { color: black; } }
@layer components { .button { color: red; } }Mostrar respuesta Mostrar explicación Qué está pasando La capa components tiene mayor prioridad que base, aunque el selector tenga la misma especificidad.
Pregunta típica ¿Cómo evitarías una guerra de especificidad?
Respuesta Senior Usaría clases de baja especificidad, capas, tokens y una estrategia de componentes; evitaría !important salvo utilidades controladas.
Repasar @layer BEM CSS Modules
★★★★★ Junior 🔥 Clásico
Box model y box-sizing Cada elemento combina content, padding, border y margin. border-box hace que width incluya padding y border.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Cada elemento combina content, padding, border y margin. border-box hace que width incluya padding y border.
Cómo funciona El tamaño visual depende del modo de sizing; margin queda fuera y puede colapsar verticalmente en flujo normal.
Ejemplo * { box-sizing: border-box; }
.card { width: 200px; padding: 20px; border: 2px solid; }Mostrar respuesta Resultado Ancho exterior: 200px
Mostrar explicación Qué está pasando Con border-box, contenido se reduce para que padding y border permanezcan dentro de los 200px.
Pregunta típica ¿Por qué se usa border-box globalmente?
Respuesta Senior Hace más predecible el layout: el ancho declarado coincide con el ancho de la caja, excluyendo margin.
Repasar sizing overflow layout
★★★★★ Junior → Mid 🔥 Muy preguntado
Flexbox vs Grid Flexbox resuelve distribución en un eje; Grid controla filas y columnas. Ambos pueden combinarse.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Flexbox resuelve distribución en un eje; Grid controla filas y columnas. Ambos pueden combinarse.
Cómo funciona Flex distribuye espacio según base, grow y shrink. Grid crea tracks explícitos o implícitos con algoritmos de colocación.
Ejemplo .layout { display:grid; grid-template-columns: 240px 1fr; }
.actions { display:flex; gap:8px; justify-content:flex-end; }Mostrar respuesta Resultado Sidebar + contenido; acciones alineadas
Mostrar explicación Qué está pasando Grid define la estructura bidimensional y Flex organiza los botones dentro de una región.
Pregunta típica ¿Cuándo elegirías Grid en lugar de Flexbox?
Respuesta Senior Grid para relaciones de filas y columnas o layout de página; Flex para alineación y distribución lineal dentro de un componente.
Repasar minmax gap alignment
★★★★★ Mid 🔥 Frecuente
Position, containing blocks y sticky position cambia el esquema de posicionamiento. absolute se ubica respecto a su containing block; fixed normalmente respecto al viewport; sticky alterna entre relativo y fijado.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender position cambia el esquema de posicionamiento. absolute se ubica respecto a su containing block; fixed normalmente respecto al viewport; sticky alterna entre relativo y fijado.
Cómo funciona Transform, filter y otras propiedades pueden crear containing blocks y afectar fixed. sticky requiere espacio de scroll y un inset como top.
Ejemplo .toolbar { position: sticky; top: 0; }Mostrar respuesta Resultado La barra se fija al alcanzar top: 0
Mostrar explicación Qué está pasando Antes del umbral participa en el flujo; después permanece pegada dentro de su contenedor de scroll.
Pregunta típica ¿Por qué sticky puede no funcionar?
Respuesta Senior Revisaría el contenedor de scroll, overflow de ancestros, altura disponible e inset. También si quedó dentro de un contexto inesperado.
Repasar overflow containing block scroll
★★★★★ Mid → Senior 🔥 Dolor real
z-index y stacking contexts z-index solo compara elementos dentro del mismo stacking context. Un valor enorme no escapa de un contexto inferior.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender z-index solo compara elementos dentro del mismo stacking context. Un valor enorme no escapa de un contexto inferior.
Cómo funciona Se crean contextos con positioned + z-index, opacity, transform, isolation y otras propiedades.
Ejemplo parentA { z-index: 1; }
parentB { z-index: 2; }
childA { z-index: 9999; }Mostrar respuesta Resultado childA sigue debajo de parentB
Mostrar explicación Qué está pasando El hijo está atrapado en el stacking context de parentA, que completo se pinta debajo de parentB.
Pregunta típica ¿Cómo depurarías un modal debajo de otro elemento?
Respuesta Senior Inspeccionaría los stacking contexts de ancestros, no solo el z-index del modal; usaría un portal o una capa superior controlada.
Repasar portals isolation overlays
★★★★★ Mid 🔥 Uso diario
Responsive, media y container queries Responsive adapta layout al espacio disponible. Media queries observan viewport; container queries permiten que un componente responda a su contenedor.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Responsive adapta layout al espacio disponible. Media queries observan viewport; container queries permiten que un componente responda a su contenedor.
Cómo funciona Un diseño robusto usa intrinsic sizing, minmax, clamp y breakpoints por contenido, no por dispositivos concretos.
Ejemplo .card-grid { container-type: inline-size; }
@container (min-width: 500px) { .card { grid-template-columns: 1fr 2fr; } }Mostrar respuesta Resultado La tarjeta cambia según su contenedor
Mostrar explicación Qué está pasando El componente es reutilizable en sidebar o main sin depender del viewport global.
Pregunta típica ¿Cómo eliges breakpoints?
Respuesta Senior Dejo que el contenido indique cuándo el diseño deja de funcionar; no parto de una lista de teléfonos.
Repasar container queries clamp intrinsic design