Como Estilizar Aplicativos Svelte

Os frameworks da Web vêm e vão, mas um dos mais promissores é o Svelte. O Svelte é uma ótima alternativa ao React e, embora já tenha uma grande comunidade, é definitivamente um framework a ser observado. O Svelte facilita o estilo de seus aplicativos, com várias abordagens disponíveis.

Estilizando aplicativos Svelte

O Svelte oferece vários métodos para estilizar aplicativos, incluindo a importação de arquivos CSS, o uso de estilos embutidos e uma sintaxe alternativa conhecida como “slots”. Cada abordagem tem vantagens e desvantagens distintas que os desenvolvedores devem considerar cuidadosamente ao escolher qual delas atende melhor às suas necessidades.

Configurando seu projeto Svelte

Para instalar o Svelte com sucesso usando a ferramenta de compilação de front-end ViteJS, é essencial ter o ambiente de tempo de execução Node.js e o Node Package Manager (NPM) pré-instalados em seu sistema. Este último pode ser confirmado através de uma simples verificação via Terminal executando o seguinte comando:

 node -v

Depois de garantir que o Node esteja operacional, inicie uma sessão de interface de linha de comando e execute os comandos subsequentes em sucessão:

 npm create vite

Ou:

 yarn create vite

Para criar um novo projeto baseado em Svelte usando o Vite com a configuração especificada, siga estas etapas:1. Use o comando vite init em seu terminal ou ambiente de desenvolvimento integrado (IDE) para gerar um novo projeto com as especificações fornecidas. Certifique-se de que o projeto seja criado em uma pasta de sua escolha.2. Altere o diretório de trabalho atual para a pasta de projeto recém-gerada executando o comando cd seguido pelo caminho para a pasta que contém os arquivos do projeto.3. Para configurar as dependências necessárias para o projeto, execute os comandos de instalação apropriados. Nesse caso, isso envolveria a instalação de pacotes como @sveltejs/kit , @sveltejs/vite e quaisquer outras bibliotecas ou estruturas necessárias para construir o aplicativo.

 npm install

Ou:

 yarn

Para iniciar o processo de desenvolvimento, é preciso primeiro instalar todas as dependências necessárias para o projeto. Para iniciar o servidor de desenvolvimento, basta executar o comando apropriado em seu terminal ou prompt de comando.

 npm run dev

Ou:

 yarn dev

Definindo a Marcação do Projeto

De fato, para iniciar a tarefa em mãos, acesse o projeto usando sua interface de codificação preferida e elimine as pastas “assets” e “lib”. Além disso, certifique-se de que o conteúdo do arquivo “app.css” e do arquivo “App.svelte” esteja limpo. Em seguida, abra o arquivo “main.js” e insira o seguinte texto:

 import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app
 

De fato, vamos agora acessar a seção de script principal do componente Svelte navegando pela estrutura de pastas do projeto. Assim que chegarmos ao arquivo App.svelte, localize o elemento dentro dele. Em seguida, sinta-se à vontade para definir uma nova variável de array JavaScript chamada “links” usando a sintaxe moderna do JavaScript. Essa coleção de elementos de dados armazenará vários recursos de hiperlink para nosso aplicativo.

 <script>
  let imageLinks = [
    "https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
    "https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
    "https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
    "https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
    "https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
    "https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
  ];
</script>
 

Dentro do contexto de um documento HTML, utilize a tag para definir um elemento contêiner primário, que deve ser estilizado como um componente principal dentro de sua estrutura pai. Este contêiner centralizado deve servir como um receptáculo para abrigar vários elementos visuais derivados da matriz de links de imagem agregados sob o título de’imageLinks’. Ao longo desse processo, empregue técnicas iterativas para criar instâncias individuais do elemento HTML, anexando-as à entidade de contêiner abrangente conforme necessário.

 <main>
  <h1>Cute Cat Gallery</h1>
  <h3>See the cutest images of cats from the internet</h3>
  <div class="container">
    {#each imageLinks as url}
      <div class="image-container">
        <img src={url} />
      </div>
    {/each}
  </div>
</main>

Depois de estabelecer a sintaxe da marcação, pode-se agora seguir em frente e aplicar a abordagem inaugural para estilizar o software por meio de importações diretas de CSS.

Como estilizar componentes Svelte com importações diretas de CSS

A incorporação de um componente Svelte geralmente envolve compor um arquivo CSS externo e importá-lo diretamente na seção de script do componente. Para fazer isso, pode-se incluir a seguinte instrução na hierarquia mais alta na tag script: javascriptimport { css } from’./app.css';

 import "./app.css";

Modifique o arquivo app.css definindo a propriedade de exibição da classe “container” como “grid” e ajustando o preenchimento da classe “image-container” para 10 pixels. Isso afetará o layout e o espaçamento das imagens em seu contêiner na guia Estilo.

 .container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.image-container {
  padding:10px;
}

Redimensione os elementos visuais para se adaptar a diferentes tamanhos de tela e aplique opções de design específicas quando um usuário interagir com as imagens exibidas usando técnicas de redimensionamento e manipulação de eventos em CSS e JavaScript.

 img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  transition: 250ms;
}

img:hover {
  scale: 1.03;
  transition: 250ms;
}

Ao executar o código em um ambiente de navegador da web, a seguinte exibição visual deve ser observada:

Vantagens das importações diretas de CSS

A reutilização por meio da utilização de um documento estranho para delinear as folhas de estilo em cascata permite uma aplicação perfeita de elementos visuais consistentes em vários componentes distintos, o que pode ser particularmente vantajoso ao tentar estabelecer uniformidade em elementos de design díspares.

A redefinição do layout e da aparência de uma página da Web geralmente é obtida alterando a camada de apresentação por meio de um documento CSS externo, em vez de ajustar a estrutura fundamental do conteúdo. Ao isolar esses dois elementos, fica mais fácil fazer alterações em um sem afetar o outro, promovendo maior versatilidade na hora de personalizar as características visuais de um site.

Desvantagens das importações diretas de CSS

Embora a utilização de arquivos CSS externos ofereça potência, ela também pode resultar em interferências e substituições imprevistas quando os estilos externos coincidem entre si. Tais ocorrências podem provocar processos prolongados de depuração e retificação. Para evitar conflitos estilísticos indesejados nos aplicativos Svelte, incorporando

O processo de carregamento de um site é afetado pela necessidade de buscar recursos adicionais além do arquivo HTML principal, como um arquivo CSS externo. Embora esse atraso possa parecer insignificante à primeira vista, ele pode se acumular em várias folhas de estilo externas, afetando o desempenho geral.

Estilizando usando tags de estilo Svelte

Uma abordagem alternativa para personalizar a aparência de um componente Svelte envolve a utilização dos atributos de estilo oferecidos pelo próprio Svelte, que seguem uma sintaxe específica para implementação. Essa sintaxe se assemelha à seguinte estrutura:

 <script>
  <!-- Your logic goes here -->
</script>

<!-- Markup goes here -->

<style>
  <!-- styling goes here -->
</style>
 

O principal benefício dessa abordagem reside em sua natureza baseada em escopo, em que os estilos de cada componente são isolados uns dos outros, evitando a interferência entre diferentes componentes. Deve-se observar que os estilos embutidos no Svelte têm precedência sobre os estilos CSS externos aplicados ao mesmo elemento. Isso pode ser observado adicionando o seguinte trecho de código na conclusão do arquivo App.svelte:

 <style>
h1 {
  background-color: red;
}
</style>
 

Incorpore o trecho de código fornecido no final do arquivo App.css para fins de estilo.

 h1 {
  background-color: yellow;
}

De fato, quando o código é executado em um navegador da Web, deve-se observar que as propriedades de apresentação do elemento # foram alteradas para incorporar uma tonalidade carmesim, substituindo a tonalidade tingida de limão previamente estipulada no App.cssarquivo.

Estilizando com pré-processadores CSS

Uma técnica amplamente empregada para projetar componentes Svelte envolve a incorporação de um pré-processador CSS dentro do atributo estilo. Esses pré-processadores oferecem inúmeros benefícios, como facilitar a utilização de operações complexas como funções avançadas, mixins e habilitar estilos aninhados, uma inovação que foi introduzida recentemente nas práticas CSS padrão.

Ao selecionar um pré-processador para estilizar o site, existe uma variedade de opções disponíveis, incluindo, entre outras, LessCSS, Sass e Stylus. Para utilizar o pré-processador de sua preferência, é necessário instalá-lo como uma dependência de desenvolvimento por meio do comando “npm install [pré-processador] –save-dev”.

 npm install -D <css-preprocessor>

Ou:

 yarn add -D <css-preprocessor>

Para utilizar um pré-processador específico em seu projeto, certifique-se de substituir seu nome por “pré-processador” no comando seguinte. A título de ilustração, caso deseje integrar o Less e empregá-lo em seu projeto, execute os seguintes passos:

 npm install -D less

Ou:

 yarn add -D less

Depois de concluir esta tarefa, você pode aplicar o atributo lang ao elemento e atribuir a ele um valor de “menos

 <style lang="less">
</style>

De fato, ao implementar menos CSS em seu componente Svelte, agora você pode aproveitar sua ampla gama de recursos para projetar e formatar os elementos visuais de seu aplicativo da web.

O que torna o Svelte incrível?

Claro! Aqui está minha tentativa de reformular: Para que um arquivo seja considerado um arquivo Svelte, ele deve terminar com o sufixo “.svelte”. Depois que esse arquivo é encontrado pelo compilador Svelte, seu conteúdo é analisado e processado de acordo. Como resultado dessa análise, o compilador produz JavaScript e CSS correspondentes que podem ser enviados ao navegador. Ao aproveitar esses formatos de saída eficientes, os usuários podem desfrutar de uma experiência de navegação mais simplificada devido aos tempos de carregamento mais rápidos associados ao conteúdo gerado.

Quando a incorporação de uma biblioteca JavaScript externa for considerada apropriada no contexto de seu projeto baseado em Svelte, é possível incluí-la diretamente em seu arquivo .svelte , dispensando a necessidade de um elemento de contenção normalmente associado a alternativas como React.