Ahora hay un borrador de especificación de trabajo para el alcance de CSS. Aparte de un período extraño en el que <style scoped> se envió y luego se eliminó de la especificación (y de los navegadores), esto es lo más lejos que ha llegado una propuesta de alcance (la especificación de Nivel 1 nunca llegó a ninguna parte).
Este viene de Miriam Suzanne.
Los basicos:
<div class="media">
<img alt="Proper alt." src="https://css-tricks.com/early-days-for-css-scoping/...">
<div class="content">
<p>...</p>
</div>
</div>Si estoy pensando en este fragmento de HTML como un “componente”, es bueno poder escribir estilos para él que sean muy explícitos solo para él. eso es lo que @scope es para, entonces…
@scope (.media) {
:scope {
display: grid;
grid-template-columns: 50px 1fr;
}
img {
filter: grayscale(100%);
border-radius: 50%;
}
.content { ... }
}Lo que me gusta de eso es:
- Este bit de CSS es muy explícito para este componente multimedia. Se lee así y se puede mantener así.
- No tuve que pensar en un nombre y una clase para el
<img>. Estoy aplicando estilo allí sin que se “filtre” a otras imágenes.
Pero espere, ¿no es esto como anteponer selectores con la clase principal?
Es como si… como si también pudiéramos escribir:
.media {
}
.media img {
}
.media .content {
}Y ahora hemos analizado las cosas internas del componente de medios. Eso es bastante repetitivo, pero con el anidamiento de CSS nativo en el camino, es solo esto:
.media {
& img {
}
& .content {
}
}Así que sí, diría que el anidamiento se ocupa de algunos tipos básicos de alcance, pero hay algunas cosas que son muy exclusivas de esta nueva propuesta de alcance.
Una característica única es el “alcance de dona”, lo que significa que detengo el alcance donde quiero. Tal vez quiero que mi alcance se detenga en una clase en particular:
@scope (.media) to (.content) {
p { }
}Ahora puedo escribir estilos que no interfieren con áreas con las que no quiero que interfieran. Quizás:
<div class="media">
<img alt="Proper alt." src="https://css-tricks.com/early-days-for-css-scoping/...">
<p>This is stylable in scope.</p>
<div class="content">
<p>This is NOT styleable in scope.</p>
</div>
</div>Pero ese no es el único problema único que resuelve esta nueva especificación. Creo que la situación del “ancestro más cercano” que presenta Miriam es quizás lo más interesante. Te enviaré a la publicación del blog para leer sobre eso: es bastante loco que todavía no tengamos una buena herramienta para eso.
Hay mucho en lo que pensar aquí, especialmente cuando piensa en situaciones más complejas, como múltiples ámbitos superpuestos y cómo la sintaxis de anidamiento podría interactuar con el alcance. Afortunadamente, Miriam está blogueando estas cosas muy claramente.