Estilante em esbelto (CSS com escopo ,: Diretivas Globais e de Classe)

Por que o código do estilo 🎨 o código faz com que os aplicativos funcionem, mas o estilo os torna deliciosos.imagine um aplicativo de tarefas que funciona perfeitamente-mas tudo é claro, tempos novos romanos, caixas de seleção sem seleção e botões diretamente de 1995. Funciona … mas ninguém quer usá-lo. É aí que entra o estilo. Uma interface do usuário limpa e bem projetada faz com que seu aplicativo pareça moderno, utilizável e confiável. Site não apenas fornece componentes reativos-ele também oferece um modelo de estilo embutido. Ao contrário do React (onde você costuma buscar extras, como módulos CSS ou componentes com estilo), o Sovete trata os estilos como cidadão de primeira classe, bem dentro de seus arquivos .Svelte. 👉 No final deste guia, você poderá: escrever CSS com escopo que se aplique apenas a um componente. Fuja do escopo com: Global quando necessário. Use diretrizes de classe para um estilo dinâmico e reativo. Sobrecarga seu fluxo de trabalho com os utilitários CSS do Tailwind. Vamos começar com a fundação: estilos com escopo – o segredo do esbelto para evitar o espaguete do CSS. Etapa 1: CSS com escopo – a maneira esbelta de todos os componentes esbeltos (arquivo .SVELTE) pode conter um bloco. Em esbelto, uma tag dentro de um componente é escopo: afeta apenas a marcação nesse mesmo arquivo. É isso que torna o estilo baseado em componentes seguro e previsível. Exemplo: um botão com estilo SRC/lib/button.svelte // Este é um componente de botão reutilizável. // “Label” é um suporte passado pelo pai. exportar Let Label = “Clique em mim”; {Label} Botão {Background: RoyalBlue; Cor: Branco; fronteira: nenhuma; preenchimento: 0.5Rem 1Rem; Radio de fronteira: 6px; Cursor: Ponteiro; } Digite o modo de saída da tela cheia de tela cheia usando o botão Importar componente src/rotas/+página.svelte de ‘$ lib/button.svelte’; Label de demonstração de css scoped = “Salvar” /> Label = “Cancelar” /> Botão simples Digite Modo de tela cheia Modo de tela cheia ✅ Os componentes têm o estilo Royal Blue. Etapa 2: Como o escopo realmente funciona, então como o esbelto impede que seus estilos vazem? Nos bastidores, o compilador reescreve seus seletores CSS como exclusivos por componente. Exemplo: seu código se você escrever isso no botão.SVELTE: Button {Background: RoyalBlue; } Digite o modo de saída da tela completa do modo de tela completa O que o SVELTE COMBILES para SVELTE gera um hash aleatório (como SVELTE-XYZ123) e reescreva seu código: Button.Svelte-XYZ123 {Background: RoyalBlue; } Digite o modo de saída de tela cheia de tela cheia e o elemento no DOM Gets: class = “Svelte-xyz123”> Salvar Enter o modo de saída da tela cheia da tela cheia ✅ Resultado: O estilo se aplica apenas aos botões neste componente. Você não precisa se preocupar com essas classes esglete-xyz123-o esbelto as gerencia automaticamente. Mas saber disso explica por que o CSS escopo “apenas funciona”. 👉 É por isso que projetos esbeltos não descem para o CSS Spaghetti, onde uma folha de estilo substitui acidentalmente outra. Etapa 3: Escaping Scope com: Global Por padrão, os estilos dentro de um componente são escopo – eles só se aplicam localmente. Mas às vezes você realmente precisa de estilos que afetam o aplicativo inteiro: uma redefinição CSS (removendo os padrões do navegador). Tipografia global (definindo fontes e altura de linha). Temas (por exemplo, fundo do modo escuro). É aí que entra: Global. Exemplo: uma redefinição global src/rotas/+layout.svelte/* Isso tem como alvo o

em todo o aplicativo */: global (corpo) {margem: 0; Fonte-família: System-Ui, sem serrif; Antecedentes: #fafafa; } /> Digite o modo de saída de tela cheia de tela cheia agora todas as páginas do seu aplicativo herdam esses estilos globais. Exemplo: Mixagem Scoped e Global Você também pode combinar seletores com escopo com os globais: /* somente Dentro deste componente são estilizados */ botão: global (span) {color: amarelo; } Texto real destacado Digite o modo de saída de tela cheia de tela cheia aqui, os restos mortais, mas o intervalo dentro é estilizado usando um seletor global. ⚠️ Regra geral: Mantenha-se escopo por padrão (mais seguro, previsível) .Use: Global apenas para redefinições, tipografia compartilhada ou tema em todo o aplicativo. Etapa 4: Classes dinâmicas com classe: os estilos estáticos da diretiva são bons, mas as UIs reais são dinâmicas. Pense: um botão “selecionado” em uma barra de ferramentas. Uma guia “ativa” na navegação. Um campo de formulário que fica vermelho quando inválido. Você não quer codificar essas classes-deseja que elas respondam ao estado. Exemplo: alternar uma classe ativa src/lib/togglebutton.svelte let Active = false; // Classe de estado local: Active = {Active} on: click = {() => Active =! Active}> {Active? “Active”: “InActive”} / * Estilo normal * / botão {preenchimento: 0.5Rem 1Rem; fronteira: nenhuma; Cursor: Ponteiro; } / * Estilo extra quando ativo * / .Active {Background: Green; Cor: Branco; } Digite o modo de saída do modo de tela completa ✅ Agora, quando você clica no botão, a classe ativa liga e desligando automaticamente. “Active”: “”}> … Digite o modo de tela cheia Sair do modo de tela cheia Classe Svelte: A diretiva o mantém limpo, reativo e declarativo. Etapa 5: Múltiplas Diretivas de Classe às vezes um componente pode ter diferentes variantes visuais. Pensamento dos botões: primário, perigo, sucesso, esboço … você não deseja criar um novo componente para cada um. Com o esbelto, você pode empilhar várias classes: diretivas para alternar diferentes classes com base em estado ou adereços. Exemplo: Variantes de botão src/lib/variantbutton.svelte // svelte 5 runas props let {type = “primary”} = $ props (); // “primário” | “perigo” | “Success” type = “Button” Class: Primary = {type === “Primary”} classe: Danger = {type === “Danger”} classe: success = {type === “success”}> {type === “Primary”? “Salvar”: Type === “Danger”? “Delete”: “ok”} botão {preenchimento: 0.5rem 1Rem; fronteira: nenhuma; Radio de fronteira: 4px; Cursor: Ponteiro; Cor: Branco; } .Primary {Background: RoyalBlue; } .danger {Background: Crimson; } .Success {Background: Seagreen; } Digite o modo de tela cheia de tela de saída de tela cheia de uso de importação VariantButton de ‘$ lib/variantbutton.svelte’; type = “primário” /> type = “Danger” /> type = “success” /> Digite o modo de saída da tela cheia de tela cheia ✅ O botão alterna automaticamente entre azul verde e vermelho, dependendo do tipo. ✅ Você pode adicionar quantas variantes quiser (sucessão, aviso, etc.). Sem as diretivas de classe, você precisará manualmente concordar manualmente. Etapa 6: estilos embutidos na maioria das vezes você usará as classes CSS para estilo, mas às vezes você precisa de um estilo dinâmico rápido – como controlar a largura, a altura ou a cor exata de um elemento de uma variável. O SVELTE permite vincular estilos diretamente dentro do atributo de estilo. Exemplo: Box Dynamic Src/lib/dynamicbox.svelte