Estilos que se Quedan en su Lugar

En el CSS tradicional, los estilos son globales. Una clase .card en un archivo afecta a los elementos .card en todas partes. Svelte resuelve esto con scope automático — los estilos en un componente solo afectan a ese componente.

Qué Aprenderás

Cómo Svelte aplica scope a los estilos automáticamente
Por qué los estilos con scope previenen conflictos
Cuándo los estilos aplican y cuándo no
Cómo inspeccionar estilos con scope

El Problema del CSS Global

El CSS tradicional genera conflictos:

/* styles.css */
.button {
  background: blue;
}

/* later in another file... */
.button {
  background: red;  /* Overwrites the first! */
}

Ahora todos los .button son rojos, incluso los que no querías modificar.

Soluciones como las convenciones de nomenclatura BEM ayudan:

.header__button--primary { }
.card__button--secondary { }

Pero son verbosas y dependen de la disciplina del desarrollador.

El Enfoque de Svelte

En Svelte, los estilos en el bloque <style> de un componente tienen scope automático:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<style>
  .card {
    border: 1px solid #ddd;
  }
  
  h3 {
    color: blue;
  }
</style>

<article class="card">
  <h3>Lawn Mowing</h3>
</article>

Estos estilos solo afectan a los elementos dentro de este componente. Otros componentes con elementos .card o h3 no se ven afectados.

Cómo Funciona

Svelte agrega atributos de clase únicos a los elementos:

<!-- What you write -->
<article class="card">
  <h3>Lawn Mowing</h3>
</article>

<!-- What Svelte generates -->
<article class="card svelte-abc123">
  <h3 class="svelte-abc123">Lawn Mowing</h3>
</article>

Y transforma tu CSS:

/* What you write */
.card { border: 1px solid #ddd; }
h3 { color: blue; }

/* What Svelte generates */
.card.svelte-abc123 { border: 1px solid #ddd; }
h3.svelte-abc123 { color: blue; }

La clase única (svelte-abc123) garantiza que los estilos solo coincidan con los elementos de este componente.

Vélo en Acción

Crea dos componentes con los mismos nombres de clase:

<!-- filename: src/lib/components/ComponentA.svelte -->
<style>
  .box {
    background: lightblue;
    padding: 1rem;
  }
</style>

<div class="box">Component A</div>

<!-- filename: src/lib/components/ComponentB.svelte -->
<style>
  .box {
    background: lightgreen;
    padding: 1rem;
  }
</style>

<div class="box">Component B</div>

Usa ambos:

<script>
  import ComponentA from '$lib/components/ComponentA.svelte';
  import ComponentB from '$lib/components/ComponentB.svelte';
</script>

<ComponentA />
<ComponentB />

Resultado: el Componente A es azul, el Componente B es verde. ¡Sin conflictos!

Inspecciona en DevTools

Abre las DevTools de tu navegador e inspecciona un elemento:

<div class="box svelte-xyz789">Component A</div>

La clase svelte-xyz789 se agrega automáticamente. El selector CSS es:

.box.svelte-xyz789 {
  background: lightblue;
  padding: 1rem;
}

Qué Recibe Scope

Svelte aplica scope a:

Selectores de clase:

.card { }        /* → .card.svelte-xxx */
.btn.primary { } /* → .btn.primary.svelte-xxx */

Selectores de elemento:

h3 { }           /* → h3.svelte-xxx */
button { }       /* → button.svelte-xxx */

Selectores de ID:

#main { }        /* → #main.svelte-xxx */

Selectores de atributo:

[type="text"] { } /* → [type="text"].svelte-xxx */

Pseudoclases y pseudoelementos:

.btn:hover { }     /* → .btn.svelte-xxx:hover */
h3::before { }     /* → h3.svelte-xxx::before */

Qué NO Recibe Scope

Los estilos para componentes hijos NO se aplican:

<!-- filename: Parent.svelte -->
<script>
  import ServiceCard from './ServiceCard.svelte';
</script>

<style>
  /* ❌ This won't work! */
  .service-card h3 {
    color: red;
  }
</style>

<ServiceCard />

¿Por qué? El h3 dentro de ServiceCard tiene una clase de scope diferente a la del padre. El selector .service-card.svelte-parent h3.svelte-child no coincide.

Para dar estilo a componentes hijos, necesitas:

Estilos globales (se tratan más adelante)
Propiedades personalizadas de CSS (se tratan más adelante)
El modificador :global() (se trata más adelante)

Beneficios del Scope

Sin conflictos de nombres — Usa nombres de clase simples como .card, .button, .title sin preocupaciones.

Refactorizar es seguro — Cambia estilos en un componente sin efectos secundarios.

Elimina con confianza — Elimina un componente y sus estilos desaparecen también.

Modelo mental más simple — Concéntrate en un componente a la vez.

Advertencias de Estilos No Utilizados

Svelte advierte sobre selectores no utilizados:

<style>
  .card { }
  .unused-class { }  /* Warning: unused CSS selector */
</style>

<div class="card">Hello</div>
<!-- .unused-class is never used -->

Esto ayuda a mantener tu CSS limpio y libre de código muerto.

Errores Comunes

Esperar que los Estilos del Padre se Apliquen a los Hijos

<!-- Parent.svelte -->
<style>
  /* ❌ Won't affect Child's elements */
  p { color: red; }
</style>

<Child />  <!-- Child's <p> won't be red -->

Pensar que los IDs Funcionan de Forma Diferente

<style>
  /* IDs are scoped too! */
  #header { }  /* → #header.svelte-xxx */
</style>

Las Clases Dinámicas Requieren que la Clase Esté en los Estilos

<style>
  /* Must exist for the class to work */
  .active { }
</style>

<button class={isActive ? 'active' : ''}>
  Click
</button>

Resumen

Svelte automáticamente limita el alcance de los estilos al componente donde están definidos. Agrega atributos de clase únicos a los elementos y modifica los selectores para que coincidan. Esto evita conflictos y facilita el mantenimiento del CSS.

Puntos clave:

Los estilos en <style> tienen alcance automático
Svelte agrega atributos de clase únicos para lograrlo
Los estilos del componente padre no afectan el interior de los componentes hijo
Sin más conflictos de nombres ni sobreescrituras accidentales

Próximos Pasos

Ahora que entiendes el alcance de estilos, vamos a aplicarlo. Continúa con Style the ServiceCard para hacer que la visualización del servicio luzca profesional.