Anidar con propósito
1
Anida cuando expresa relación real de componente, no por comodidad visual.
2
Si al compilar obtienes selectores largos y difíciles de sobreescribir, simplifica estructura.
Sass
03
Nesting y selector padre (&) con criterio
Aprende a anidar en Sass sin generar CSS inflado, usando & para estados, variantes y estructura BEM limpia.
Código del tema: Arquitectura Sass escalable
📘 Teoría
Uso práctico de &
1
Con & puedes crear .boton--primario, :hover, :focus-visible o contextos de tema sin duplicar nombre base.
2
Esto encaja muy bien con metodologías de componentes en CSS.
Nesting controlado
.button {
padding: .625rem 1rem;
&:hover {
opacity: .92;
}
&--primary {
background: #2563eb;
color: #fff;
}
}