Se escribieron una década de hojas de estilo para preprocesadores porque CSS no podía anidar. Ahora puede hacerlo, de forma nativa, y el navegador analiza exactamente la sintaxis que produjo su memoria muscular Sass, con una regla: los selectores descendientes dentro de un bloque anidado necesitan el signo comercial.

.card {
  border: 1px solid oklch(0.9 0 0);

  > header { padding: 0.75rem 1rem; }
  &:hover { border-color: oklch(0.75 0 0); }
  p { margin-block: 0.4rem; }
  &.wide { max-width: 60ch; }
}

Las dos reglas que lo mantienen honesto

  1. Componga el padre explícitamente cuando lo diga en serio: el signo comercial es el selector principal, por lo que toda la tarjeta necesita el formulario que se muestra arriba, y el .wide simple coincidiría con todos los elementos anchos.
  2. Siga anidando a poca profundidad, dos niveles como máximo. El anidamiento profundo era un hábito de los preprocesadores para construir torres de especificidad, y las torres de especificidad siempre fueron el error.

Migrar un preprocesador

  • La salida de Sass ya se compila en CSS plano, así que ejecute su compilación una última vez y haga diferencias; luego reemplace la sintaxis de anidamiento y observe cómo se mantienen las pruebas.
  • Las variables se traducen cerca: la mayoría de los archivos de variables Sass se convierten en propiedades personalizadas simples, que se conectan en cascada y se pueden anular en tiempo de ejecución.
  • Es posible que aún valga la pena conservar el paso de compilación para otras cosas, pero ya no posee la hoja de estilo, lo cual es una eliminación muy interesante.

Este sitio incluye CSS simple exactamente por esa razón: menos capas de compilación entre lo que usted escribió y lo que ejecuta el navegador. El anidamiento simplemente hace que el CSS simple sea agradable en el tamaño en el que realmente se encuentra cada proyecto.