Las diferencias entre CSS nativo y Sass Nesting

Desde su lanzamiento, CSS se ha negado tenazmente a admitir una sintaxis para anidar selectores. La alternativa siempre ha sido utilizar un preprocesador CSS como Sass. Pero hoy en día, el anidamiento es oficialmente parte del CSS nativo. Puede probar esta función directamente en los navegadores modernos.

Si está migrando desde Sass, deberá tener en cuenta las diferencias entre la anidación nativa y la anidación de Sass. Existen algunas diferencias clave entre ambas funciones de anidamiento, y ser conscientes de ellas es crucial si estás haciendo el cambio.

Necesita usar "&" con selectores de elementos en CSS nativo

CSS Nesting es todavía una especificación preliminar, con compatibilidad variable con los navegadores. Asegúrate de revisar sitios como caniuse.com para obtener información actualizada.

A continuación se muestra un ejemplo del tipo de anidamiento que vería en Sass, utilizando la sintaxis SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Este bloque CSS especifica que cualquier lista desordenada dentro de un elemento con un navegación La clase se alinea como una columna flexible, una forma de Diseñar elementos HTML en la página.. Además, todo el texto del enlace de anclaje dentro de los elementos con un navegación la clase debe ser negra.

Ahora, en CSS nativo, ese tipo de anidamiento no sería válido. Para que funcione, tendrías que incluir el símbolo comercial (&) delante de los elementos anidados, así:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

La primera versión del anidamiento de CSS no permitía el anidamiento de selectores de tipo. Un cambio reciente significa que ya no es necesario usar "&", pero es posible que las versiones anteriores de Chrome y Safari aún no admitan esta sintaxis actualizada.

Ahora, si estuviera usando un selector que comienza con un símbolo (por ejemplo, selector de clase) para apuntar a una parte específica de la página, puede omitir el signo comercial. Entonces, la siguiente sintaxis funcionaría tanto en CSS nativo como en Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

No puedes crear un nuevo selector usando "&" en CSS nativo

Una de las características que probablemente te gusten de Sass es la capacidad de hacer algo como esto:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Este código Sass se compila en el siguiente CSS sin formato:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

En CSS nativo, no puedes crear un nuevo selector usando "&". El compilador Sass reemplaza "&" con el elemento principal (p. ej. .nav), pero el CSS nativo tratará el "&" y la parte posterior como dos selectores separados. Como resultado, intentará crear un selector compuesto, que no dará el mismo resultado.

Sin embargo, este ejemplo funcionará en CSS nativo:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Esto funciona porque el primer selector es el mismo que nav.nav-lista en CSS simple, y el segundo es el mismo que nav.enlace-nav. Agregar un espacio entre "&" y el selector equivaldría a escribir nav .nav-lista.

En CSS nativo, si usa el signo comercial de esta manera:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Es lo mismo que escribir esto:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Esto podría resultarle una sorpresa, teniendo en cuenta que tanto el __ lista de navegación y __enlace de navegación están dentro del .nav selector. Pero el signo comercial en realidad coloca los elementos anidados delante del elemento principal.

La especificidad puede ser diferente

Otra cosa a tener en cuenta es el impacto en la especificidad que no ocurre en Sass pero sí en el anidamiento CSS nativo.

Así que digamos que tienes un y un elemento. Con el siguiente CSS, un en cualquiera de estos elementos se utilizará una fuente serif:

#main, article {
h2 {
font-family: serif;
 }
}

La versión compilada del código Sass anterior es la siguiente:

#mainh2,
articleh2 {
font-family: serif;
}

Pero la misma sintaxis de anidamiento en CSS nativo producirá un resultado diferente, efectivamente el mismo que:

:is(#main, article) h2 {
font-family: serif;
}

El es() El selector maneja las reglas de especificidad de manera ligeramente diferente al anidamiento de Sass. Básicamente, la especificidad de:es() se actualiza automáticamente al elemento más específico de la lista de argumentos proporcionados.

El orden de los elementos puede cambiar el elemento seleccionado

Anidar en CSS nativo puede cambiar completamente lo que realmente significa el selector (es decir, selecciona un elemento completamente diferente).

Considere el siguiente HTML, por ejemplo:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Y el siguiente CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Este es el resultado si usas Sass como compilador de CSS:

Ahora, en el bloque HTML, si movieras el con la clase de tema oscuro dentro del de llamada a la acción, rompería el selector (en modo Sass). Pero cuando cambia a CSS normal (es decir, sin preprocesador de CSS), los estilos seguirán funcionando.

Esto se debe a la forma en que el :es() Funciona debajo del capó. Entonces, el CSS anidado anterior se compila en el siguiente CSS simple:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Esto es especificar un .título que es descendiente de ambos .tema-oscuro y .llamada a la acción. Pero el orden de estos realmente no importa. Siempre y cuando el .título es descendiente de .llamada a la acción y .tema-oscuro, funciona en cualquier orden.

Este es un caso extremo y no es algo con lo que se encontrará con tanta frecuencia. Pero entender el :es() La funcionalidad subyacente del selector puede ayudarle a dominar cómo funciona el anidamiento en CSS. Esto también hace depurando tu CSS más fácil.

Aprenda a usar Sass en React

Debido a que Sass se compila en CSS, puedes usarlo con prácticamente cualquier marco de interfaz de usuario. Puede instalar el preprocesador CSS en proyectos Vue, Preact, Svelte y, por supuesto, React. El proceso de configuración de Sass para todos estos marcos también es bastante sencillo.

La mayor ventaja de usar Sass en React es que te permite escribir estilos limpios y reutilizables usando variables y mixins. Como desarrollador de React, saber cómo usar Sass te ayudará a escribir código más limpio y eficiente y te convertirá en un mejor desarrollador en general.