CSS Nesting nativo

Qué es el anidamiento nativo

Durante años, escribir CSS con componentes complejos obligaba a repetir los mismos selectores una y otra vez. Cada vez que una tarjeta necesitaba variantes, modificadores o estados, la hoja de estilos crecía con líneas como .tarjeta, .tarjeta h2, .tarjeta .boton, .tarjeta:hover .boton. Esa repetición dificultaba la lectura y provocaba errores al renombrar clases.

Los preprocesadores como Sass o Less resolvieron el problema permitiendo anidar reglas dentro de otras, pero requerían instalar herramientas, compilar y mantener pipelines. Con el anidamiento nativo integrado en la especificación CSS, ese paso intermedio desaparece. El navegador interpreta directamente la sintaxis anidada y la aplica sin ayudas externas.

La regla básica consiste en escribir un selector dentro de otro. El segundo selector aplica sus estilos solo a los elementos que cumplan ambos selectores: el padre y el hijo anidado.

.tarjeta {
    padding: 1rem;
    border: 1px solid #ddd;

    h2 {
        font-size: 1.5rem;
        color: #333;
    }

    p {
        line-height: 1.5;
    }
}

El anidamiento no introduce nuevas capacidades de selección. Es azúcar sintáctico que reorganiza el código sin cambiar la especificidad ni la cascada.

El código anterior equivale exactamente a escribir .tarjeta { ... }, .tarjeta h2 { ... } y .tarjeta p { ... } por separado, pero mantiene juntos todos los estilos de un componente.

El selector ampersand

Aunque el anidamiento simple funciona para descendientes directos, muchas veces se necesita referirse al propio elemento padre para aplicarle pseudoclases, modificadores o combinaciones. Ese papel lo cumple el carácter ampersand (&), que representa al selector que está en el nivel superior.

Con el ampersand podemos escribir variantes del componente sin salir del bloque principal:

.boton {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;

    &:hover {
        background: #2563eb;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    &.primario {
        font-weight: bold;
    }
}

Sin el ampersand, la regla :hover anidada se interpretaría como un descendiente que cumple la pseudoclase, no como el botón en estado hover. El ampersand hace explícita la referencia y evita ese malentendido.

El ampersand también permite invertir la relación habitual padre-hijo. Colocándolo al final de la cadena, aplicamos estilos a un elemento cuando un antepasado cumpla otra condición:

.icono {
    width: 24px;

    .oscuro & {
        filter: invert(1);
    }
}

En este ejemplo, .icono invierte su color únicamente cuando está dentro de un contenedor con la clase .oscuro. El bloque del icono mantiene toda su lógica en un único lugar.

Anidamiento de pseudoclases y pseudoelementos

El ampersand combina de forma natural con cualquier pseudoclase (:hover, :focus, :active, :checked) y con pseudoelementos (::before, ::after). Esta organización mantiene cerca el estado base y todas sus variantes.

.enlace {
    color: #0066cc;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid #0066cc;
        outline-offset: 2px;
    }

    &::after {
        content: " \2192";
        font-weight: bold;
    }
}

Anidar los estados dentro del componente facilita la lectura porque al abrir el archivo vemos de un vistazo todo el comportamiento visual del enlace, sin tener que saltar entre bloques dispersos.

Media queries y container queries anidadas

Una de las aplicaciones más útiles del anidamiento aparece con las media queries y container queries. Podemos introducirlas dentro del componente al que afectan, sin repetir el selector en cada salto de tamaño.

.grid-productos {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;

    @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

El resultado es un bloque cerrado que contiene el comportamiento responsive del grid sin necesidad de duplicar .grid-productos en varias secciones. La misma técnica aplica a las container queries:

.tarjeta {
    container-type: inline-size;
    padding: 1rem;

    @container (min-width: 400px) {
        padding: 2rem;
        display: grid;
        grid-template-columns: auto 1fr;
    }
}

Jerarquías y agrupación de componentes

El anidamiento también admite varios niveles de profundidad. Cuando modelamos componentes con subcomponentes, la estructura del CSS refleja la del HTML y facilita entender de un vistazo qué aplica a qué.

.formulario {
    display: grid;
    gap: 1rem;

    .campo {
        display: flex;
        flex-direction: column;

        label {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        input {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;

            &:focus {
                border-color: #3b82f6;
                outline: none;
            }
        }
    }

    .acciones {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}

Aunque el anidamiento sea posible hasta muchos niveles, se recomienda no exceder tres niveles de profundidad. A partir de ahí el CSS se vuelve frágil, con selectores muy específicos que son difíciles de sobrescribir después.

Consideraciones prácticas

El anidamiento nativo está disponible en todos los navegadores modernos y forma parte del núcleo de CSS. No requiere compilación, ni plugin, ni configuración. Al ser interpretado directamente, las herramientas del navegador muestran las reglas anidadas en su forma expandida equivalente, lo que ayuda a depurar.

Hay algunas diferencias sutiles respecto a Sass que conviene tener presentes. En CSS nativo no se puede concatenar texto al ampersand para generar clases nuevas, es decir, no se puede escribir &__titulo para formar .tarjeta__titulo como hace Sass. Para metodologías como BEM esa limitación implica mantener el nombre completo:

.tarjeta {
    padding: 1rem;

    .tarjeta__titulo {
        font-size: 1.5rem;
    }

    .tarjeta__cuerpo {
        font-size: 1rem;
    }
}

Aun así, el ahorro de código y la claridad estructural compensan cualquier pequeña limitación respecto a los preprocesadores. Para proyectos nuevos, el anidamiento nativo es el enfoque recomendado, dejando Sass o Less únicamente para bases de código ya existentes que dependan de sus funciones avanzadas como mixins o bucles.

flowchart LR
    A[CSS plano tradicional] --> B[Preprocesadores Sass/Less]
    B --> C[Compilación previa]
    A --> D[Anidamiento nativo CSS]
    D --> E[Interpretado por el navegador]
    E --> F[Sin paso de build]

La adopción del anidamiento nativo reduce la dependencia de herramientas externas en el stack frontend y simplifica los proyectos. Las hojas de estilo quedan más organizadas, los componentes se leen como bloques autocontenidos y el mantenimiento mejora al evitar la repetición de selectores largos.