Estilos Que Se Mantienen en Su Lugar

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

Lo Que Aprenderás

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

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! */
}

Cada .button ahora es rojo, incluso los que no pretendías cambiar.

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 alcance 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éalo 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!

Inspeccionar 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 Alcance

Svelte aplica alcance 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 Alcance

Los estilos para componentes hijo 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 alcance diferente a la del padre. El selector .service-card.svelte-parent h3.svelte-child no coincide.

Para aplicar estilos a componentes hijo, necesitas:

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

Beneficios del Alcance

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 — Quita 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 Manera 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 aplica automáticamente un alcance a los estilos del componente donde están definidos. Agrega atributos de clase únicos a los elementos y modifica los selectores para que coincidan. Esto previene 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 los elementos internos del componente hijo
No 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 que la visualización del servicio luzca profesional.