Preguntas de Entrevista CSS

Preguntas avanzadas de CSS para entrevistas frontend

Preguntas de Entrevista CSS

Domina CSS con estas preguntas comunes de entrevista que cubren selectores, modelo de caja, flexbox, grid, animaciones y más.

1. Explica el Modelo de Caja de CSS

El modelo de caja CSS describe cómo se calculan el tamaño y el espacio de los elementos:

/* box-sizing por defecto */
.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  /* Ancho total = 200 + 40(padding) + 10(border) = 250px */
}

/* box-sizing: border-box */
.element-border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Ancho total = 200px (incluye padding y border) */
}

Componentes del modelo de caja:

Content: El contenido real del elemento
Padding: Espacio entre el contenido y el borde
Border: El borde alrededor del padding
Margin: Espacio fuera del borde

2. ¿Qué es Specificity en CSS y Cómo Funciona?

La especificidad determina qué reglas CSS se aplican cuando hay conflictos:

/* Especificidad: 0-0-1 */
p { color: black; }

/* Especificidad: 0-1-0 */
.text { color: blue; }

/* Especificidad: 0-1-1 */
p.text { color: green; }

/* Especificidad: 1-0-0 */
#heading { color: red; }

/* Especificidad: Infinito */
p { color: purple !important; }

Orden de especificidad (menor a mayor):

Selectores de elemento (p, div)
Selectores de clase (.clase)
Selectores de ID (#id)
Estilos inline (style="")
!important

3. Explica Flexbox y Sus Propiedades Principales

/* Contenedor Flex */
.container {
  display: flex;
  flex-direction: row;        /* row, column, row-reverse, column-reverse */
  justify-content: center;    /* flex-start, flex-end, center, space-between, space-around */
  align-items: center;        /* flex-start, flex-end, center, stretch, baseline */
  flex-wrap: wrap;           /* nowrap, wrap, wrap-reverse */
  gap: 10px;                 /* Espacio entre elementos */
}

/* Elementos Flex */
.item {
  flex: 1;                   /* flex-grow flex-shrink flex-basis */
  flex-grow: 1;             /* Qué tan rápido crece */
  flex-shrink: 1;           /* Qué tan rápido se encoge */
  flex-basis: 100px;        /* Tamaño base */
  align-self: flex-start;   /* Alineación individual */
}

4. ¿Qué es CSS Grid y Cómo Difiere de Flexbox?

/* Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 columnas */
  grid-template-rows: auto 1fr auto;   /* 3 filas */
  gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Flexbox vs Grid:

Flexbox: Diseño unidimensional (fila O columna)
Grid: Diseño bidimensional (filas Y columnas)
Flexbox: Mejor para componentes y layouts pequeños
Grid: Mejor para layouts de página completos

5. Explica Position en CSS

/* Static (por defecto) */
.static {
  position: static;
}

/* Relative - relativo a su posición normal */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Absolute - relativo al ancestro posicionado más cercano */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Fixed - relativo al viewport */
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Sticky - híbrido de relative y fixed */
.sticky {
  position: sticky;
  top: 0;
}

6. ¿Qué son las Media Queries y Cómo Funcionan?

/* Mobile First Approach */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

/* Large Desktop */
@media (min-width: 1280px) {
  .container {
    width: 1200px;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #fff;
  }
}

7. Explica CSS Variables (Custom Properties)

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  font-size: var(--font-size-base);
}

/* JavaScript puede cambiar variables */

8. ¿Qué son las Pseudo-clases y Pseudo-elementos?

/* Pseudo-clases (:) - Estado del elemento */
a:hover { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(odd) { background: #f0f0f0; }

/* Pseudo-elementos (::) - Partes del elemento */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

p::first-line {
  color: blue;
}

.tooltip::before {
  content: "Info: ";
  font-weight: bold;
}

.box::after {
  content: "";
  display: block;
  clear: both;
}

9. Explica CSS Animations y Transitions

/* Transitions - Cambios suaves */
.button {
  background: blue;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background: red;
  transform: scale(1.1);
}

/* Animations - Animaciones complejas */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeIn 1s ease-out forwards;
}

/* Animación con múltiples pasos */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bouncing {
  animation: bounce 2s infinite;
}

10. ¿Qué es el Z-Index y Cómo Funciona?

/* z-index controla el orden de apilamiento */
.overlay {
  position: fixed;
  z-index: 1000;
  /* Debe tener position diferente de static */
}

.modal {
  position: fixed;
  z-index: 1001;  /* Aparece sobre .overlay */
}

/* Stacking Context */
.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 9999;  /* Solo compete con hermanos del mismo contexto */
}

Mejores Prácticas de CSS

✓ Usa metodologías como BEM para organizar CSS
✓ Aplica mobile-first en diseños responsive
✓ Usa CSS Variables para temas y valores reutilizables
✓ Minimiza el uso de !important
✓ Usa Flexbox para componentes, Grid para layouts
✓ Optimiza animaciones con transform y opacity
✓ Mantén la especificidad baja