CSS Que Se Queda Donde Lo Pones

Todo desarrollador frontend ha vivido esta pesadilla: escribes una regla CSS perfectamente razonable como p { color: red }, y de repente los párrafos del otro lado de tu aplicación se vuelven rojos. No querías decir todos los párrafos. Querías los de aquí, en este componente. Pero CSS no se preocupa por tus intenciones — es global por naturaleza, y cada regla que escribes tiene el potencial de llegar a lugares que nunca esperabas.

Los frameworks han intentado resolver esto de docenas de maneras: convenciones de nomenclatura BEM, CSS Modules, librerías CSS-in-JS, frameworks de utilidades. Cada enfoque tiene sus compromisos — algunos añaden verbosidad, algunos añaden costo en tiempo de ejecución, algunos requieren herramientas de build, y todos requieren disciplina.

Svelte adopta un enfoque fundamentalmente diferente. Cuando escribes CSS dentro del bloque <style> de un componente Svelte, ese CSS se aplica con scope automáticamente al componente. Sin convenciones de nomenclatura que memorizar. Sin librerías adicionales que instalar. Sin sobrecarga en tiempo de ejecución. El compilador maneja todo en tiempo de build, generando nombres de clase únicos que garantizan que tus estilos no puedan afectar accidentalmente a otros componentes.

Este artículo cubre exactamente cómo funciona ese mecanismo, cuáles son las reglas y límites, y los pocos lugares donde el sistema de scope se comporta de manera diferente al CSS puro. El artículo de seguimiento cubre qué hacer cuando necesitas que los estilos vayan más allá de esos límites.

Cómo el Compilador Aplica Scope a Tus Estilos

El scope de CSS en Svelte es una transformación en tiempo de compilación. El compilador genera un hash único basado en los estilos del componente, añade ese hash como clase a cada elemento que apunta tu CSS, y reescribe los selectores para incluir el hash. El resultado es un componente cuyos estilos solo pueden coincidir con sus propios elementos.

Un Ejemplo Concreto

Esto es lo que escribes:

<p>Hello!</p>
<span>World</span>

<style>
	p {
		color: blue;
	}
</style>

Y esto es lo que Svelte genera (simplificado):

<p class="svelte-abc123">Hello!</p>
<span>World</span>

<style>
	p.svelte-abc123 {
		color: blue;
	}
</style>

Tres cosas a notar en la salida. Primero, el hash (svelte-abc123) se añade como clase a <p> porque el CSS lo apunta. Segundo, <span> no recibe hash — nada en el CSS de este componente apunta a span, así que no hay razón para marcarlo. Tercero, el selector CSS p se convierte en p.svelte-abc123, que solo coincide con un <p> que tenga exactamente esa clase hash. Ningún elemento <p> de otro componente la tendrá.

Esta transformación es determinista y ocurre completamente en tiempo de build sin ninguna sobrecarga en tiempo de ejecución.

Dos Componentes, Sin Colisión

El beneficio práctico aparece de inmediato cuando dos componentes estilizan el mismo tipo de elemento:

<!-- Greeting.svelte -->
<p>Hello!</p>

<style>
	p {
		color: blue;
		font-weight: bold;
	}
</style>

<!-- Warning.svelte -->
<p>Watch out!</p>

<style>
	p {
		color: red;
		font-style: italic;
	}
</style>

Ambos se compilan a selectores con su propio hash único. p.svelte-abc123 solo coincide con el párrafo de Greeting. p.svelte-xyz789 solo coincide con el de Warning. Puedes usar selectores simples y semánticos — p, h1, button, .card — sin preocuparte por colisiones.

Las Tres Reglas de Scope

Entender el scope con precisión requiere saber qué significa "pertenecer a un componente". Hay tres reglas que definen el límite.

Regla 1: Los estilos se aplican a los elementos en la plantilla propia del componente

Las reglas CSS de un componente alcanzan los elementos HTML escritos directamente en su bloque <script> + plantilla:

<!-- Parent.svelte -->
<div class="wrapper">
	<p>This paragraph IS styled by Parent</p>
	<Child />
</div>

<style>
	.wrapper {
		padding: 1rem;
	}
	p {
		color: green;
	}
</style>

La regla p estiliza el párrafo escrito en la plantilla de Parent. No alcanza los elementos <p> dentro de <Child />.

Regla 2: Los estilos de un componente padre no penetran en los componentes hijo

Incluso los selectores descendientes no cruzarán el límite del componente:

<!-- Parent.svelte -->
<div class="wrapper">
	<Child />
</div>

<style>
	/* This does NOT style <p> elements inside Child */
	.wrapper p {
		color: green;
	}
</style>

El selector compilado .wrapper.svelte-abc p.svelte-abc requiere que ambos elementos lleven el mismo hash de scope. El <p> dentro de <Child> tiene un hash diferente (el hash propio de Child), por lo que no coincidirá. El límite es firme.

Regla 3: El contenido creado en el padre es estilizado por el padre

Cuando pasas contenido a un componente hijo mediante snippets, ese contenido sigue estando escrito en la plantilla del padre — por lo que los estilos del padre se aplican a él:

<!-- Parent.svelte -->
<Child>
	<!-- This <p> is written in Parent's template -->
	<p>Snippet paragraph</p>
</Child>

<style>
	/* This DOES style the paragraph above */
	p {
		color: green;
	}
</style>

Los estilos siguen a donde el markup es escrito, no a donde es renderizado. El snippet viaja hacia Child, pero el hash de scope de Parent viaja con él. Esto es intuitivo una vez que lo piensas: desde la perspectiva del compilador, el <p> es un elemento de Parent.

Advertencias de Estilos No Utilizados

Svelte mantiene tus hojas de estilo compactas advirtiéndote cuando una regla CSS no coincide con ningún elemento en la plantilla del componente:

<p>Hello</p>

<style>
	p {
		color: blue;
	}

	/* ⚠️ Warning: Unused CSS selector ".sidebar" */
	.sidebar {
		width: 200px;
	}
</style>

Esto detecta errores tipográficos y reglas sobrantes de refactorizaciones — ambas fuentes comunes de sobrecarga en hojas de estilo. El compilador sabe exactamente qué elementos existen en la plantilla y puede verificar que cada selector tenga un objetivo.

Cuando la Advertencia Es un Falso Positivo

El compilador no puede ver las clases añadidas en tiempo de ejecución por JavaScript o librerías de terceros:

<script>
	let el = $state(null)

	$effect(() => {
		if (el) el.classList.add('active') // added programmatically
	})
</script>

<div bind:this={el}>Content</div>

<style>
	/* ⚠️ Unused CSS selector — but it IS used at runtime */
	.active {
		background: yellow;
	}
</style>

La solución es usar :global(.active) para los estilos que apuntan a clases añadidas dinámicamente. Eso le indica tanto al compilador como al navegador que apliquen la regla independientemente del scope — cubierto en el siguiente artículo.

Animaciones Keyframe con Scope

Los @keyframes tienen scope en el componente usando el mismo enfoque de hashing:

<div class="spinner"></div>

<style>
	.spinner {
		animation: spin 1s linear infinite;
	}

	/* "spin" is scoped — it won't clash with a "spin" keyframe in another component */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

Svelte renombra el keyframe internamente (a algo como spin-abc123) y ajusta la propiedad animation para que coincida. Dos componentes pueden definir @keyframes spin sin que ninguno interfiera con el otro. Si necesitas que un keyframe sea referenciable globalmente — por ejemplo, por una librería de terceros — le añades el prefijo -global- al nombre, lo cual se cubre en el artículo sobre Estilos Globales.

Anidamiento de CSS

El anidamiento de CSS moderno (ahora compatible con todos los navegadores principales) funciona de manera natural dentro del scope de Svelte:

<nav class="sidebar">
	<a href="/home">Home</a>
	<a href="/docs">Docs</a>
</nav>

<style>
	.sidebar {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;

		a {
			/* Scoped: only <a> elements inside .sidebar in THIS component */
			padding: 0.5rem 1rem;
			border-radius: 4px;
			color: #374151;
			text-decoration: none;

			&:hover {
				background: #f3f4f6;
			}
		}
	}
</style>

El hash de scope se aplica tanto a .sidebar como al selector a anidado, manteniendo todo dentro del límite del componente. El anidamiento que apunta a elementos fuera del límite del componente (usando :global()) se cubre en el artículo sobre Estilos Globales.

Especificidad: Ligeramente Mayor de lo que Parece

Debido a que Svelte añade una clase a cada selector con scope, tus reglas compiladas son ligeramente más específicas que los selectores que escribiste:

/* What you write — specificity: 0,0,1 (one element) */
p {
	color: blue;
}

/* What Svelte generates — specificity: 0,1,1 (one class + one element) */
p.svelte-abc123 {
	color: blue;
}

Esto es casi siempre inofensivo. Pero importa si estás mezclando estilos de componentes con scope con hojas de estilo globales — una regla de componente con scope superará a una regla de elemento plano en una hoja de estilo global incluso si la regla global se carga después.

Hay un matiz adicional que vale la pena conocer: cuando la misma clase de scope necesita aparecer más de una vez en un selector complejo, Svelte usa :where(.svelte-abc123) para las apariciones posteriores. :where() siempre tiene especificidad cero, lo que significa que la especificidad del selector no sigue acumulándose a medida que el selector crece. Esta es una elección deliberada del compilador — mantiene la especificidad predecible sin importar cuán complejos sean tus selectores.

Errores Comunes

Esperar que los estilos del padre lleguen a los hijos

<!-- Avoid: won't style <h1> or <p> inside Header or Content -->
<div class="page">
	<Header />
	<Content />
</div>

<style>
	.page h1 {
		font-size: 2rem;
	}
	.page p {
		line-height: 1.7;
	}
</style>

El selector compilado .page.svelte-abc h1.svelte-abc requiere que ambos elementos tengan el mismo hash. Los elementos dentro de componentes hijos tienen hashes diferentes. Los selectores no coincidirán.

La solución depende de lo que estés intentando lograr. Si quieres estilizar elementos que controlas, hazlo dentro de sus propios componentes. Si necesitas llegar al DOM no controlado (librerías de terceros, contenido {@html}), usa :global(). Si necesitas que un padre influya en la apariencia de un hijo sin romper la encapsulación, usa propiedades personalizadas de CSS. Los tres enfoques se cubren en los siguientes artículos.

Referencia Rápida

<!-- Scoped to this component — can use simple element selectors freely -->
<style>
	p {
		color: blue;
	}
	.card {
		padding: 1rem;
	}
	h1 {
		font-size: 2rem;
	}

	/* CSS nesting works — still scoped */
	.sidebar {
		a {
			color: #374151;
		}
		a:hover {
			background: #f3f4f6;
		}
	}

	/* Keyframes are scoped too — no clash with same name in other components */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

¿Qué Sigue?

El scoping es la base, pero es solo la mitad del panorama. El siguiente artículo cubre qué sucede cuando necesitas que el CSS vaya más allá del límite del componente:

Estilos Globales — :global(), bloques :global {}, keyframes -global-, importaciones de archivos externos, y cuándo usar cada enfoque
Binding Dinámico de Clases — Hacer reactiva la asignación de clases con el atributo class y la directiva class: