La especificidad del ampersand

El anidamiento parece una reorganización puramente visual del mismo CSS, y casi siempre lo es. La excepción vive en un sitio muy concreto: cuando el selector padre es una lista con entradas de peso desigual, todas las reglas anidadas debajo heredan el peso de la más pesada. El cambio ocurre al editar la primera línea del bloque y afecta a las cuarenta reglas de dentro sin que ninguna de ellas se modifique.

El ampersand pesa lo que el padre más específico

Ya sabes que & equivale a :is() sobre la lista completa del padre. La especificidad se deriva de ahí sin excepciones: la de :is() es la del selector complejo más específico de su argumento.

.a, #b {
  & .c { color: red; }
}

El selector resuelto es :is(.a, #b) .c. El más específico del argumento es #b, que vale (1,0,0), así que el total es (1,0,0) + (0,1,0) = (1,1,0). Y ese peso se aplica también cuando el elemento que encaja lo hace por .a, porque la especificidad se calcula sobre el selector escrito, no sobre el motivo por el que encajó.

Es exactamente el mismo mecanismo que ya viste en :has() y en la cláusula of S. Lo que cambia aquí es que el :is() no lo has escrito tú: lo ha puesto el anidamiento.

Cuándo se infla y cuándo no

La noticia buena es que el caso habitual no infla nada. Cuando el padre es un solo selector, :is(X) pesa lo mismo que X, y anidar por niveles da el mismo número que el selector plano equivalente.

.card {
  & .cuerpo {
    & .titulo { font-weight: 600; }
  }
}

El resuelto del nivel más profundo es :is(:is(.card) .cuerpo) .titulo. El argumento del :is() exterior es el selector complejo :is(.card) .cuerpo, que pesa (0,2,0), más (0,1,0) del .titulo: total (0,3,0). Idéntico a .card .cuerpo .titulo. El anidamiento no cobra peaje.

Las cinco primeras filas son tranquilizadoras y la quinta es la que arruina tardes. La única fuente de inflación es una lista de padres con especificidades desiguales. Mientras todas las entradas del padre pesen lo mismo, el anidamiento es neutro.

Cómo aplanarlo

Tres herramientas, en orden de preferencia.

Separa la lista. La solución más honesta suele ser no tener una lista desigual. Si #b está ahí por un caso heredado, sácalo a su propia regla y deja el bloque anidado con un padre homogéneo.

/* Antes: contamina todo el bloque. */
.panel, #panel-legado { & .titulo { } & .cuerpo { } }

/* Despues: el caso raro se trata como lo que es, un caso raro. */
.panel { & .titulo { } & .cuerpo { } }
#panel-legado { /* lo minimo imprescindible */ }

Envuelve el padre en :where(). Cuando la lista tiene que quedarse como está, :where() la neutraliza a cero y el peso pasa a ser solo el del selector hijo:

:where(.a, #b) {
  & .c { color: red; }   /* :is(:where(.a, #b)) .c  ->  (0,1,0) */
}

Ojo con el efecto: ahora la regla pesa (0,1,0), menos que antes de anidar. Eso es lo que quieres en CSS de librería, donde el objetivo es que el consumidor pueda sobrescribir con una clase; puede no serlo en CSS de aplicación.

Usa capas y deja de contar. Si el motivo por el que te preocupa la especificidad es el orden de sobrescritura, la respuesta correcta casi siempre es @layer, porque una capa posterior gana a una anterior con independencia de los números. Anidar dentro de capas te permite escribir el selector que mejor exprese la intención sin auditarlo:

@layer componentes, temas;

@layer componentes {
  .card { & .titulo { font-weight: 600; } }
}

@layer temas {
  /* Gana sin necesidad de pesar mas. */
  .card { & .titulo { font-weight: 500; } }
}

El presupuesto de especificidad de un componente

En un proyecto con anidamiento conviene fijar una regla explícita, escrita en la guía del equipo, porque el coste de no fijarla no aparece hasta que el proyecto es grande:

Un componente declara su raíz con un solo selector de clase. Nada de listas, nada de identificadores, nada de mezclar clase y etiqueta. Con eso, toda la aritmética de dentro es predecible y ninguna edición en la primera línea altera el comportamiento de las de abajo.

Los desvíos van en capas, no en peso. Los temas, los estados excepcionales y los ajustes de una página concreta se resuelven con @layer o con custom properties, nunca subiendo especificidad.

Los selectores prestados van en :where(). Si tienes que reaccionar a una clase que no controlas —una que pone un framework, una que viene del gestor de contenidos—, envuélvela para que no arrastre peso al bloque.

@layer componentes {
  .card {
    /* Raiz de un solo selector: presupuesto (0,1,0). */
    padding: 1rem;

    & .titulo { font-weight: 600; }
    &:has(> img) { padding-block-start: 0; }

    /* Selector prestado, sin peso. */
    :where(.tema-compacto) & { padding: 0.5rem; }
  }
}