CSS
Explica el nesting nativo y @scope para organizar reglas relacionadas, limitar su alcance y evitar selectores profundos o dependientes del DOM.
CSS nesting agrupa reglas relacionadas y limita dónde comienzan y terminan sus coincidencias.
@scope.card {
padding: 1rem;
& > h2 {
margin-block: 0;
}
}.navigation {
display: flex;
a {
color: inherit;
}
}El selector anidado se combina con el selector exterior. Usa & cuando necesites colocar explícitamente el selector padre.
.button {
&:hover { ... }
&.primary { ... }
[data-theme="dark"] & { ... }
}CSS nativo sigue la gramática del navegador, la cascada y reglas propias de especificidad. No incluye automáticamente variables, mixins o loops de preprocesador.
.page {
.section {
.card {
.title { ... }
}
}
}Produce selectores acoplados y difíciles de sobrescribir. Limita nesting a relaciones cercanas del componente.
.card {
display: grid;
@media (width >= 48rem) {
grid-template-columns: 1fr 2fr;
}
}También pueden anidarse container queries, supports y layers según su gramática.
@scope (.card) {
h2 {
font-size: 1.25rem;
}
}La regla solo selecciona h2 dentro de un subtree con raíz .card.
Desde diciembre de 2025, @scope figura como Baseline Newly available; proyectos con navegadores antiguos todavía necesitan fallback o una estrategia compatible.
@scope (.card) {
:scope {
border-radius: 1rem;
}
:scope > h2 { ... }
}Representa la raíz del scope.
@scope (.article) to (.comments) {
a { color: var(--article-link); }
}Los enlaces dentro de .comments quedan fuera del alcance, evitando que una región anidada herede reglas locales no deseadas.
Si dos reglas scoped empatan en otros criterios, puede ganar la que tenga una raíz más cercana al elemento.
Esto ocurre después de specificity y antes de source order dentro de la cascada.
No evita:
Es control de alcance de selectores, no Shadow DOM.
@scope (.card) {
:scope {
display: grid;
&:has(> img) {
grid-template-columns: 8rem 1fr;
}
}
}& representa el selector padre.@scope limita un subtree y puede definir un límite inferior.¿Por qué @scope (.card) no impide que la card herede color del body?
Porque scope limita coincidencias de selectores; no crea una frontera de herencia.
Custom properties y var() crea valores configurables que atraviesan la cascada.