¡El anidamiento nativo de CSS por fin ha llegado!

1. La función «no oficial» que usamos durante una década

Si escribiste código frontend hace algunos años, seguro que conoces Sass o Less. Estos preprocesadores CSS ofrecen una función que encanta a casi todos los desarrolladores: el anidamiento de selectores. Permite escribir las reglas de los selectores hijos dentro del selector padre, como al escribir HTML, lo que mejora enormemente la legibilidad y organización del código.

// Sass 语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Durante años dependimos de herramientas de compilación para convertir esta sintaxis en CSS normal que los navegadores pudieran entender. Pero ahora la situación ha cambiado.

2. Llega el anidamiento nativo de CSS

Desde principios de 2023, los principales navegadores —Chrome, Safari y Firefox— anunciaron sucesivamente su compatibilidad con el módulo nativo CSS Nesting. Esto significa que podemos escribir reglas anidadas directamente en archivos .css, sin ningún preprocesamiento.

El ejemplo anterior se puede escribir con CSS nativo así:

/* 原生 CSS 语法 */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sí, ¡parece exactamente Sass!

3. El importante papel de &

Al igual que en los preprocesadores, el símbolo & también desempeña un papel fundamental en el anidamiento nativo: representa al selector padre. Resulta especialmente útil al trabajar con pseudoclases, pseudoelementos o selectores combinados.

.card {
  background: white;
  border-radius: 8px;

  /* & 代表 .card */
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* & 代表 .card，组合成 .card.dark-mode */
  &.dark-mode {
    background: #333;
  }

  /* & 代表 .card，组合成 .card > .header */
  > .header {
    font-weight: bold;
  }
}

4. Una diferencia pequeña pero importante respecto a Sass

En Sass puedes anidar directamente un selector de clase, por ejemplo .card { .title { ... } }. Esto no estaba permitido en las primeras versiones de la especificación nativa CSS Nesting: toda regla anidada tenía que empezar con un símbolo como &, >, + o ~.

Aunque la especificación más reciente ha relajado esta restricción y permite anidar directamente selectores de tipo, como article { h1 { ... } }, al anidar selectores de clase sigue siendo una buena práctica utilizar & para ser explícitos y evitar ambigüedades.

/* 推荐写法 */
.article {
  & .author-name {
    font-style: italic;
  }
}

/* 不推荐的写法 (在某些早期实现或严格解析器中可能无效) */
.article {
  .author-name {
    font-style: italic;
  }
}

El uso de & expresa claramente que .author-name es descendiente de .article.

5. Compatibilidad de navegadores y futuro

En septiembre de 2023, todos los navegadores modernos principales —Chrome 112+, Safari 16.5+ y Firefox 117+— ya eran compatibles con CSS Nesting. Esto significa que podemos empezar a adoptarlo gradualmente en producción.

La llegada del anidamiento nativo de CSS es otro hito importante en la evolución de la propia plataforma web. Reduce nuestra dependencia de las herramientas de compilación, vuelve CSS más potente y expresivo, y permite a quienes comienzan en el desarrollo frontend escribir y entender los estilos de una forma más intuitiva.