Estilos que Ficam no Seu Lugar

No CSS tradicional, os estilos são globais. Uma classe .card em um arquivo afeta elementos .card em todo lugar. O Svelte resolve isso com escopo automático — estilos em um componente afetam apenas aquele componente.

O que Você Vai Aprender

Como o Svelte delimita estilos automaticamente
Por que estilos com escopo evitam conflitos
Quando os estilos se aplicam e quando não se aplicam
Como inspecionar estilos com escopo

O Problema do CSS Global

O CSS tradicional cria conflitos:

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

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

Agora todo .button é vermelho, até os que você não pretendia alterar.

Soluções como convenções de nomenclatura BEM ajudam:

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

Mas são verbosas e dependem da disciplina do desenvolvedor.

A Abordagem do Svelte

No Svelte, os estilos no bloco <style> de um componente têm escopo definido automaticamente:

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

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

Esses estilos afetam apenas os elementos dentro deste componente. Outros componentes com elementos .card ou h3 não são afetados.

Como Funciona

O Svelte adiciona atributos de classe únicos aos 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>

E transforma seu 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; }

A classe única (svelte-abc123) garante que os estilos correspondam apenas aos elementos deste componente.

Veja na Prática

Crie dois componentes com os mesmos nomes de classe:

<!-- 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>

Use ambos:

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

<ComponentA />
<ComponentB />

Resultado: o Componente A é azul, o Componente B é verde. Sem conflito!

Inspecione no DevTools

Abra o DevTools do seu navegador e inspecione um elemento:

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

A classe svelte-xyz789 é adicionada automaticamente. O seletor CSS é:

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

O que Recebe Escopo

O Svelte delimita o escopo de:

Seletores de classe:

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

Seletores de elemento:

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

Seletores de ID:

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

Seletores de atributo:

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

Pseudo-classes e pseudo-elementos:

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

O que Não Recebe Escopo

Estilos para componentes filhos NÃO são aplicados:

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

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

<ServiceCard />

Por quê? O h3 dentro de ServiceCard tem uma classe de escopo diferente da do componente pai. O seletor .service-card.svelte-parent h3.svelte-child não corresponde.

Para estilizar componentes filhos, você precisa de:

Estilos globais (abordado posteriormente)
Propriedades personalizadas do CSS (abordado posteriormente)
O modificador :global() (abordado posteriormente)

Benefícios do Escopo

Sem conflitos de nomenclatura — Use nomes de classe simples como .card, .button, .title sem preocupação.

Refatoração é segura — Altere estilos em um componente sem efeitos colaterais.

Delete com confiança — Remova um componente e seus estilos também desaparecem.

Modelo mental mais simples — Concentre-se em um componente por vez.

Avisos de Estilos Não Utilizados

O Svelte avisa sobre seletores não utilizados:

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

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

Isso ajuda a manter seu CSS limpo e livre de código morto.

Erros Comuns

Esperar que Estilos do Pai se Apliquem aos Filhos

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

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

Achar que IDs Funcionam de Forma Diferente

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

Classes Dinâmicas Precisam Estar Definidas nos Estilos

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

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

Resumo

O Svelte automaticamente delimita os estilos ao componente onde estão definidos. Ele adiciona atributos de classe únicos aos elementos e modifica os seletores para corresponder. Isso evita conflitos e facilita a manutenção do CSS.

Principais conclusões:

Estilos em <style> são automaticamente delimitados
O Svelte adiciona atributos de classe únicos para isso
Estilos do componente pai não afetam o interior dos componentes filhos
Chega de conflitos de nomenclatura ou substituições acidentais

Próximos Passos

Agora que você entende o escopo, vamos aplicá-lo. Continue com Estilizar o ServiceCard para deixar a exibição do serviço com aparência profissional.