Estilização Moderna 🎨

Aula 14 - CSS no Ecossistema Vue.js

🎨 O Desafio do CSS no Frontend

• Conflitos de nomes (Global Scope)
• Dificuldade em manter temas (Light/Dark)
• Arquivos gigantes e difíceis de ler

🛡️ O Salvador: CSS Scoped

<style scoped>
  .titulo { color: blue; }
</style>

🌊 CSS Global vs Scoped

• Use arquivos .css globais apenas para:
• Resets (Normalize)
• Variáveis de cores principais
• Fontes e Tipografia básica

⚡ Tailwind CSS

• Abordagem Baseada em Utilitários
• Você estiliza sem sair do HTML

  <div class="bg-blue-500 p-4 rounded-lg shadow-md">
  

• Combina perfeitamente com a componentização do Vue

🚀 Por que Tailwind?

• Não precisa inventar nomes de classes (.container-inner-wrapper-v2)
• Menos arquivos CSS para gerenciar
• Design System pronto e consistente

🧠 CSS Reativo (v-bind no Style)

• O Vue 3 permite usar variáveis JS no CSS!

  <style scoped>
    .barra {
      width: v-bind(porcentagem + '%');
      color: v-bind(corDinamica);
    }
  </style>
  

🎭 Classes Dinâmicas (:class)

• Alternar estilos com base no estado:

  <button :class="{ 'btn-ativo': isLigado, 'btn-desligado': !isLigado }">
  

• Muito mais limpo que fazer if/else no template

📦 Bibliotecas de Componentes (UI Frameworks)

• Não reinvente a roda!
• Vuetify / Element Plus / PrimeVue / Shadcn-vue
• Oferecem botões, modais e tabelas prontas e acessíveis

🖼️ Ícones Inteligentes

• Fuja de fontes de ícones pesadas!
• Use ícones como SVG
• Bibliotecas como Iconify permitem importar apenas o ícone que você usa

📊 Fluxo de Estilização Profissional

graph LR
    HTML[SFC Template] --> TW[Tailwind Classes]
    HTML --> Scoped[Scoped CSS]
    TW --> PostCSS[Processamento Build]
    Scoped --> PostCSS
    PostCSS --> Minified[CSS Pequeno e Rápido]

🌓 Dark Mode Prático

• Use classes de utilitário (dark:bg-black)
• Salve a preferência do usuário no LocalStorage
• Otimize imagens para ambos os modos

📱 Responsividade de Componente

• Um componente deve saber se adaptar
• Use Media Queries dentro do style scoped
• Pense no "Mobile First"

🏗️ Desafio da Aula

• Estilizar um formulário usando Tailwind CSS
• Implementar uma barra de progresso que muda de cor (verde para vermelho) conforme o valor via v-bind no style
• Criar um botão com hover animado

🏁 Resumo

• scoped evita conflitos
• v-bind() une JS e CSS
• Tailwind e UI Frameworks aceleram o trabalho

🏁 Dúvidas?

Vejam como o site fica lindo! Próxima aula: Build, Deploy e Produção.