@scope
Rule @scope
Imagina que tenemos una tarjeta (.card) que tiene un título (.title). Pero dentro de esa tarjeta, podemos tener otro componente (como un .badge o una .media-object) que también tiene su propio .title.
El Problema: Normalmente, si escribes .card .title { color: blue; }, ambos títulos se volverán azules.
La Solución con @scope: Usamos @scope para decirle al CSS de la tarjeta que no debe aplicarse a los elementos que están dentro del .badge.
En el siguiente ejemplo, dentro de un bloque @scope, la pseudo-clase :scope se refiere al propio elemento raíz que define ese ámbito (scope), es decir, .badge.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de @scope</title>
<link rel="stylesheet" href="1.scope.css">
</head>
<body>
<h1>Ejemplo de <code>@scope</code></h1>
<article class="card">
<h2 class="title">Este es el Título de la Tarjeta</h2>
<p>Este párrafo debe heredar los estilos de la tarjeta.</p>
</article>
<article class="card">
<h2 class="title">Este es el Título de la Tarjeta</h2>
<p>Este párrafo también.</p>
<div class="badge">
<h3 class="title">Título de la Insignia</h3>
<p>Este bloque es un componente separado y no debe ser afectado por los estilos de .card .</p>
</div>
</article>
</body>
</html>En la Tarjeta 1: El .title ("Este es el Título de la Tarjeta") será grande (1.75rem) y de color oscuro (#333), tal como lo define el ámbito de .card.
En el caso de no poner un límite al scope, como en el caso de @scope (.badge), sería equivalente a simplemente usar nesting.
En la Tarjeta 2:
- El primer .title (el de la tarjeta) será grande y oscuro.
- El segundo .title ("Título de la Insignia") no se verá afectado por los estilos de .card. En su lugar, usará los estilos de su propio ámbito (.badge), siendo pequeño (1rem) y de color azul (#007c91).
¿Cuándo usar nesting y cuándo @scope?
- Usa Nesting para organizar los estilos internos de un componente que no contiene otros componentes complejos.
- Usa @scope cuando estés diseñando un componente "contenedor" (como .card, article, sidebar) y quieras asegurarte de que sus estilos no interfieran con los componentes que pueda tener dentro (como .badge, .avatar, .mi-boton).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="2.scopevsnesting.css">
</head>
<body>
<main>
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium tenetur, incidunt voluptatem
exercitationem fugit modi minus unde dolorum autem quis ea recusandae suscipit vitae illo ratione maxime
mollitia quaerat.</article>
<aside class="sidebar">
<h3>Menú</h3>
<p>Contenido de la barra lateral...</p>
<button>Botón Genérico</button>
<hr>
<button class="mi-boton">
Botón Verde (¡Debería ser verde!)
</button>
</aside>
</main>
</body>
</html>Con nesting, .mi-boton pierde sus estilos. Se vuelve transparente y con texto blanco normal, porque los estilos de .sidebar button son más específicos (o simplemente se aplican después) y anulan los estilos base de .mi-boton.
En cambio con scope, odemos aplicar estilos al .sidebar y sus botones genéricos, pero creando un límite para que no afecten a nuestro componente .mi-boton.
- El .sidebar tiene su fondo oscuro y padding.
- El genérico se vuelve transparente con borde blanco (como queríamos).
- El mantiene sus estilos originales (fondo verde, texto blanco, negrita) porque el @scope impidió que los estilos del contenedor le afectaran.