Aula 08 - Estilização e CSS 🎨

O Design do Componente

Agenda de Hoje 📅

1. CSS Scoped: O fim da bagunça
2. O Hashing de Classes do Svelte
3. Estilos Globais com :global
4. Classes Dinâmicas com class:
5. Variáveis CSS e Temas
6. Prática: Menu com Modo Escuro

1. CSS no Svelte: Scoped 🛡️

• Por padrão, o CSS escrito na tag <style> só afeta o próprio componente.
• Você pode usar nomes simples como .btn, .container ou .titulo.
• Sem conflitos com outros componentes!

2. Como o Svelte faz isso? 🧙‍♂️

• O compilador adiciona uma classe única a cada elemento (ex: svelte-1a2b3c).
• O seu seletor .titulo vira .titulo.svelte-1a2b3c.

<!-- HTML Gerado -->
<h1 class="titulo svelte-1a2b3c">Olá</h1>

<!-- CSS Gerado -->
.titulo.svelte-1a2b3c { color: blue; }

3. Seletores Globais 🌐

• Precisa que um estilo "escape" do componente?
• Use o modificador :global().

<style>
  :global(body) {
    margin: 0;
    font-family: sans-serif;
  }

  /* Afeta todos os h1 da aplicação */
  :global(h1) { color: red; }
</style>

4. Classes Dinâmicas (class:) 🏷️

• Forma elegante de adicionar/remover classes baseada em variáveis JS.

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

<button class:ativo={ativo}> Clique aqui </button>

<style>
  .ativo { background: green; }
</style>

4.1 Abreviando (Shorthand)

• Se o nome da classe for igual ao da variável:

<button class:ativo> ... </button>

5. Estilos em Linha Dinâmicos (style:) 🖌️

• Útil para valores específicos que vêm do script (ex: cores dinâmicas).

<script>
  let corFavorita = "purple";
</script>

<div style:color={corFavorita}> Texto colorido </div>

6. CSS Otimizado (Unused CSS) 🧹

• Se você escrever uma regra CSS e não usar no HTML...
• O Svelte vai te avisar (Warning)!
• O CSS não utilizado é removido do pacote final.

7. Pré-processadores (Sass/Less) 🚀

• O Vite permite usar Sass de forma simples.
• Basta instalar o pacote sass e usar o atributo lang.

<style lang="scss">
  $cor-primaria: #ff3e00;

  .card {
     background: $cor-primaria;
     &:hover { opacity: 0.8; }
  }
</style>

8. Prática: Cartão com Tema 🌗

• Crie uma variável escuro = false.
• Use class:escuro na div principal do card.
• No CSS, defina as cores para o card normal e para o .escuro.

9. Resumo da Aula ✅

• CSS Scoped evita colisões.
• :global para regras de alto nível.
• class: e style: para dinamismo visual.

Próxima Aula: Roteamento SPA 🗺️

• Navegação entre páginas.
• svelte-spa-router.
• Parâmetros na URL.

Dúvidas? 🤔

"O design não é apenas o que parece, mas sim como funciona."