Lección 5: Anidación

La anidación, también demoninado como CSS Nesting, es una característica que nos permite anidar selectores dentro de otros selectores. Ayuda a escribir código CSS más modular evitando repeticiones.

Veamos un ejemplo sencillo a partir del siguiente HTML:

<article class="planeta planeta--marte">
    <h2 class="planeta__titulo">Marte</h2>
    <p class="planeta__descripcion">Marte es el cuarto planeta del sistema solar.</p>
</article>

<article class="planeta planeta--jupiter">
    <h2 class="planeta__titulo">Júpiter</h2>
    <p class="planeta__descripcion">Júpiter es el quinto planeta del sistema solar.</p>
</article>

Queremos aplicar un estilo de color blanco para el texto al título de Marte. Para ello, puedo hacer lo siguiente:

.planeta--marte .planeta__titulo {
    color: white;
}

A continuación busco que la descripción de Marte sea gris.

.planeta--marte .planeta__titulo {
    color: white;
}

.planeta--marte .planeta__descripcion {
    color: gray;
}

Usando la anidación, puedo simplicarlo bastante:

.planeta--marte {
    .planeta__titulo {
        color: red;
    }

    .planeta__descripcion {
        color: gray;
    }
}

No solo queda más compacto y fácil de trabajar, sino que también evito repetir el selector .planeta--marte en cada regla.

Usando &

La anidación también nos permite usar el selector & para referirnos al selector padre. Sería el equivalenta a usar :is.

Veamos un ejemplo. Si yo necesito dar un color de fondo rojo a Marte y rosa a Jupiter, es relativamente fácil:

.planeta--marte {
    background-color: red;
}

.planeta--jupiter {
    background-color: pink;
}

Pero quiero limintarlo. Si o si, ebe acompañar la clase .planeta (parecido a usar :is).

.planeta.planeta--marte {
    background-color: red;
}

.planeta.planeta--jupiter {
    background-color: pink;
}

O podemos usar la anidación junto a &:

.planeta {
    &.planeta--marte {
        background-color: red;
    }

    &.planeta--jupiter {
        background-color: pink;
    }
}

Estamos indicando que solamente aplicaré los estilos si acompañan a la .planeta.

Podríamos unir todo lo anterior para crear una modulación más firme:

.planeta {
    &.planeta--marte {
        .planeta__titulo {
            color: red;
        }

        .planeta__descripcion {
            color: gray;
        }
    }

    &.planeta--jupiter {
        .planeta__titulo {
            color: orange;
        }

        .planeta__descripcion {
            color: green;
        }
    }
}

La concadenación no es posible. Por ejemplo, no puedo tener un padre llamado .button que contenga un hijo llamado &--primary con el objetivo de obtener .button--primary. Es una técnica muy común en SASS junto a nomenclaturas como BEM, pero con CSS Nesting no se puede replicar.

Otro uso muy interesante es para incluir pseudoelementos y pseudoclases del selector padre. Por ejemplo:

.planeta {
    background-color: blue;
}

.planeta:hover {
    background-color: red;
}

Podríamos empaquetarlo de la siguiente manera:

.planeta {
    background-color: blue;
    &:hover {
        background-color: red;
    }
}

Y así con cualquier otro elemento.

.planeta {
    background-color: blue;
    &:hover {
        background-color: red;
    }
    &::before {
        content: '🪐';
    }
    &::after {
        content: '🌎';
    }
}

Interesante, ¿no?

Anidación de reglas

Podemos anidar @media, @supports, @layer, @scope y @container.

Es realmente útil para los media queries. Por ejemplo, voy a decir que en versión escritorio sea rojo el fondo de Marte pero amarillo en smartphone:

.planeta {
    &.planeta--marte {
        background-color: red;

        @media (width < 600px) {
            background-color: yellow;
        }
    }
}

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario