Aula 08 - Estilização e Escopo de CSS 🎨

Objetivo

Objetivo: Entender como o Svelte isola estilos automaticamente, aprender a criar estilos globais quando necessário e dominar o uso de classes CSS dinâmicas.

---

1. CSS Escopado (Local) 🛡️

A característica mais amada do Svelte em relação ao estilo é o Escopo de CSS. Por padrão, qualquer estilo escrito dentro da tag <style> de um componente só afeta aquele componente.

Como funciona?

O Svelte adiciona uma classe única (ex: svelte-xyz123) a todos os elementos do seu componente e aos seus seletores CSS durante a compilação.

<style>
  p {
    color: blue; /* Só afetará parágrafos DESTE arquivo */
  }
</style>

<p>Eu sou azul!</p>

---

2. Visualizando o Escopo (Mermaid) 📊

graph TD
    A[Código Svelte] --> B{Compilador}
    B -- "HTML" --> C["p class='svelte-abc123'"]
    B -- "CSS" --> D["p.svelte-abc123 { color: blue }"]
    subgraph "Navegador"
        C
        D
    end

---

3. O Escopo Local na Prática 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># O Svelte transforma seu CSS</span>
    <span data-ty="progress"></span>
    <span data-ty>.btn { color: red }</span>
    <span data-ty># vira:</span>
    <span data-ty>.btn.svelte-hash { color: red }</span>
</div>

---

4. Estilos Globais 🌍

Às vezes, você quer que um estilo afete elementos fora do componente ou seletores de bibliotecas externas. Para isso, usamos o modificador :global().

<style>
  /* Afeta todos os <h1> da aplicação */
  :global(h1) {
    font-family: 'Arial';
  }

  /* Afeta um .card mesmo se estiver dentro de um componente filho */
  .container :global(.card) {
    border: 1px solid silver;
  }
</style>

---

5. Classes Condicionais 💡

O Svelte oferece um atalho sensacional para adicionar ou remover classes baseadas em uma condição: a diretiva class:nome.

<script>
  let ativo = true;
</script>

<style>
  .destaque {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<!-- Se 'ativo' for true, a classe 'destaque' é aplicada -->
<button 
  class:destaque={ativo} 
  on:click={() => ativo = !ativo}
>
  Alternar Destaque
</button>

---

6. Mini-Projeto: Toggle de Tema 🚀

Vamos criar um pequeno sistema de temas: 1. No seu componente, crie uma variável modoNoturno (booleano). 2. No <style>, defina uma classe .dark com fundo preto e texto branco. 3. No markup, use class:dark={modoNoturno} em uma div que envolva todo o conteúdo. 4. Crie um botão que inverta o valor de modoNoturno. 5. Adicione uma transição suave de cor usando CSS padrão.

Dica de Ouro

As variáveis CSS (--minha-cor) funcionam perfeitamente no Svelte e são ótimas para passar valores do JavaScript para o CSS de forma reativa!

---

7. Exercício de Fixação 📝

1. Por que é seguro usar seletores simples como p ou h1 no Svelte?
2. Como você aplicaria um estilo a um elemento que não pertence ao componente atual?
3. Qual a vantagem da diretiva class:nome em relação à interpolação manual de classes?

---

Próxima Aula: Entrando no Módulo 3! Vamos aprender sobre o Roteamento SPA na Prática! 🗺️