Anidamiento CSS
Las variables dieron nombre a tus valores. calc y compañía los calcularon. El nesting organiza los selectores que usan esos valores: mantén el título, el botón y los estilos hover de una tarjeta dentro de .card en lugar de repetir el nombre del padre por todo el archivo.
Anida un selector hijo
Escribe una regla dentro de otra. Un selector de clase o de tipo anidado se une como descendiente del padre (combinador de espacio) salvo que indiques otra cosa con &:
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);
.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.body {
color: var(--muted, #444);
line-height: 1.5;
}
}
El navegador expande esto a .card .title y .card .body. Sigues obteniendo selectores descendientes ordinarios: el nesting es azúcar para la estructura y la localidad, no un modelo de coincidencia nuevo.
El selector padre &
Usa & cuando la regla anidada deba adherirse al mismo elemento que el padre: pseudoclases, pseudoelementos o una clase extra en el padre:
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;
&:hover {
background: var(--brand-hover, #1d4ed8);
}
&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}
&.is-primary {
background: var(--brand-strong, #1e40af);
}
}
&:hover significa .button:hover. &.is-primary significa .button.is-primary. Sin &, un :hover { } suelto es nesting inválido en CSS nativo: el & deja el enlace explícito.
Combinadores con &
Pon el combinador después de & cuando quieras un hijo, un hermano u otro vínculo explícito — no el espacio descendiente simple:
.nav {
display: flex;
gap: 0.75rem;
& > .item {
padding: 0.35rem 0.6rem;
}
& > .item + .item {
border-inline-start: 1px solid #ddd;
}
/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}
& > .item → .nav > .item. Un .badge anidado sin & → .nav .badge. Elige a propósito: los descendientes profundos por accidente son un olor típico del nesting.
Anida @media con el componente
Puedes anidar at-rules como @media dentro de una regla de estilo para que los breakpoints vivan junto al componente que modifican:
.hero {
padding: 2rem 1.25rem;
h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (min-width: 48rem) {
padding: 3rem 2rem;
h1 {
max-width: 20ch;
}
}
}
Al expandirse, la media query sigue envolviendo las declaraciones de .hero (y .hero h1). Combínalo con tokens y clamp() de lecciones anteriores del Modern Toolkit: el nesting solo reubica las reglas.
Patrones de nesting de un vistazo
📊 Chuleta de nesting nativo
| Escribes | Significa | Úsalo cuando |
|---|---|---|
.card { .title { } } |
.card .title |
Estilar un descendiente bajo el componente |
.btn { &:hover { } } |
.btn:hover |
Pseudoclase en el mismo elemento |
.btn { &.big { } } |
.btn.big |
Clase extra en el mismo elemento |
.nav { & > a { } } |
.nav > a |
Combinador hijo explícito |
.box { @media (…) { } } |
Media query acotada a los selectores de esa regla | Mantener breakpoints con el componente |
Mantén los nidos poco profundos
Dos o tres niveles suelen seguir legibles. Árboles más profundos recrean el problema de la «pirámide de selectores» de los equipos Sass: diffs difíciles, mayor specificity y estilos que solo tienen sentido dentro de un padre gigante. Prefiere una raíz de componente clara (.card, .nav) y anida estados e hijos cercanos — no la página entera.
Paquete de componente: tokens + nest + estados
Un fragmento realista une las tres últimas ideas del toolkit sin repetir las lecciones de calc ni de variables:
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}
.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}
&.is-compact {
--panel-pad: 0.5rem;
}
@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}
Los tokens siguen siendo custom properties; calc sigue derivando el hueco; el nesting mantiene heading, actions, el estado compacto y el ajuste de pantalla pequeña en un solo sitio.
Pruébalo tú
- Toma reglas planas
.card {},.card .title {},.card .meta {}y reescríbelas con nesting bajo.card. - Añade
&:hoveren un.linkpara que solo el enlace (no un span anidado) cambie de color. - Anida
@media (min-width: 40rem)dentro de.sidebarpara ensanchar el padding — confirma en DevTools los selectores expandidos. - Convierte un
:hover { }anidado por error (sin&) en&:hover { }y comprueba que valida. - Limita un nido desordenado de tres niveles a dos promoviendo un bloque interno a su propia clase.
Errores habituales
- Escribir
:hover { }anidado sin&— inválido o no es lo que querías; usa&:hover - Esperar que un
.childsuelto signifique.parent.child— eso necesita&.child - Copiar a ciegas trucos Sass
&__elementde BEM — el nesting nativo sigue la gramática de selectores CSS - Anidar cinco niveles «porque se puede» — la legibilidad y la specificity sufren
- Pensar que el nesting sustituye a
var()ocalc()— solo agrupa selectores y at-rules
Resumen
- Anida selectores hijos para mantener locales los estilos del componente; por defecto se expanden a descendientes
- Usa
¶ estados del mismo elemento (:hover,.is-active) y combinadores explícitos - Anida
@mediajunto al componente que estás afinando - Mantén los nidos poco profundos; el nesting es estructura, no tokens ni matemáticas
- Siguiente en Modern Toolkit: container queries — estilos según el tamaño del padre, no solo el viewport
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior