Como Estilizar Aplicativos Svelte

Estilizando aplicações Svelte

Toda biblioteca ou estrutura de interface do usuário requer um método para estilizar seus componentes. A maioria das estruturas baseadas em componentes oferece suporte ao método tradicional de estilizar componentes: basta importar o arquivo CSS e pronto. Svelte não é exceção. No Svelte, existem três maneiras principais de estilizar seus aplicativos, cada uma com suas próprias vantagens e desvantagens.

Configurando seu projeto Svelte

Para instalar o Svelte, você pode usar a ferramenta de compilação de front-end ViteJS. Para configurar as coisas, certifique-se de que o tempo de execução Node.js e o Node Package Manager (NPM) estejam instalados corretamente em seu computador. Você pode verificar a disponibilidade de Node.js e NPM executando o seguinte comando no terminal:

node -v

Depois de verificar se o Node está em execução, abra o terminal e execute o seguinte:

npm create vite

Ou:

yarn create vite

Isso deve servir de base para um novo projeto do Vite. Defina o nome do projeto como quiser, a estrutura deve ser “Svelte” e a variante deve ser JavaScript (mas você pode usar TypeScript se estiver confortável com isso). Agora, mude para o diretório do projeto com o cd e execute o seguinte comando para instalar as dependências necessárias:

npm install

Ou:

yarn

Depois de instalar as dependências, você pode iniciar o servidor de desenvolvimento executando:

npm run dev

Ou:

yarn dev

Definindo a Marcação do Projeto

Abra o projeto em qualquer editor de código de sua escolha e exclua o ativos e lib pasta. Além disso, certifique-se de limpar o conteúdo do app.css arquivo e o App.svelte arquivo. Abra o main.js arquivo e substitua o conteúdo pelo seguinte:

import App from './App.svelte'

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

export default app

A seguir, abra o App.svelte arquivo e no roteiro tag e crie um array que conterá links diferentes, como este:

<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> 

Debaixo de roteiro marcar, criar um principal elemento, com um div filho “container” que conterá todas as imagens. Em seguida, percorra todos os elementos em imagemLinks e renderizar um imagem elemento para cada iteração.

<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 definir a marcação, agora você pode estilizar o aplicativo com o primeiro método — importações diretas de CSS.

Estilizando componentes Svelte com importações diretas de CSS

Uma das maneiras comuns de estilizar um componente Svelte é escrever um arquivo CSS externo e importá-lo diretamente para o componente. No nível superior do roteiro marca, importe o app.css arquivo assim:

import "./app.css";

Agora, abra o app.css arquivo e defina a propriedade de exibição na classe “container” como “grid” e defina a preenchimento na classe “image-container” para 10px:

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

.image-container {
padding:10px;
}

Selecione as imagens e torne-as responsivas e, em seguida, adicione o estilo apropriado para imagens suspensas:

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

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

Ao executar o código no navegador, isso é o que você deve ver:

Vantagens das importações diretas de CSS

• Reutilização: Definir seu CSS em um arquivo externo facilita a reutilização dos mesmos estilos em vários componentes. Isso pode ser útil nos casos em que você deseja que diferentes componentes compartilhem o mesmo estilo.
• Flexibilidade: Se você decidir redesenhar seu site, poderá atualizar o estilo no arquivo CSS externo sem precisar modificar a estrutura HTML. Essa separação de preocupações permite maior flexibilidade na adaptação do design do seu site.

Desvantagens das importações diretas de CSS

• Complexidade em Cascata: Embora definir seu CSS em um arquivo externo seja poderoso, também pode levar a conflitos inesperados e substituições quando estilos externos interagem entre si. Isso pode levar a depuração e solução de problemas demoradas. Você pode evitar conflitos de estilo inesperados no Svelte usando estilo tags diretamente no arquivo Svelte.
• Aumento do tempo de carregamento: quando um usuário visita seu site, ele precisa baixar o arquivo CSS externo, além do HTML e, opcionalmente, dos arquivos JavaScript. Isso pode adicionar alguns milissegundos ao tempo de carregamento, o que pode não parecer muito, mas pode aumentar se você tiver muitos arquivos CSS externos.

A segunda maneira de estilizar os componentes do Svelte é usar o estilo tags fornecidas por Svelte. A sintaxe é mais ou menos assim:

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

<!– Markup goes here –>

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

 

Uma vantagem desse método é que ele define estilos para o componente, o que significa que os estilos de um componente não podem afetar os estilos de outro componente. É importante notar que estilo as tags no Svelte têm a prioridade mais alta e substituirão qualquer estilo CSS externo para um determinado elemento. Para ilustrar isso, adicione o seguinte ao final do App.svelte arquivo

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

Em seguida, adicione o seguinte ao final do App.css arquivo:

h1 {
  background-color: yellow;
}

Ao executar o código no navegador, você notará que o h1 elemento tem uma cor de fundo vermelha – substituindo a cor de fundo amarela que foi definida no App.css arquivo.

Estilizando com pré-processadores CSS

A terceira maneira mais popular de estilizar um componente Svelte é usar um pré-processador CSS no estilo marcação. Os pré-processadores CSS têm muitas vantagens, eles permitem que você use funções avançadas, mixins e até suporte a estilo aninhado, que é um recurso novo no CSS nativo.

Existem muitos pré-processadores para escolher e isso inclui LessCSS, Sass, Stylus e muito mais. Para usar seu pré-processador favorito, você deve instalá-lo como uma dependência de desenvolvimento, executando:

npm install -D <css-preprocessor>

Ou:

yarn add -D <css-preprocessor>

Certifique-se de substituir pelo nome do pré-processador real. Por exemplo, se você deseja instalar o Less e usá-lo em seu projeto, execute o seguinte:

npm install -D less

Ou:

yarn add -D less

Depois de fazer isso, você pode adicionar o idioma atributo para o estilo tag e defina-a como “menos”.

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

E com isso, agora você pode usar todos os recursos incríveis do Less CSS para estilizar seu componente esbelto.

O que torna o Svelte incrível?

Todo arquivo Svelte termina com a extensão “.svelte”. O compilador Svelte analisa o código escrito no .svelte arquivo e gera o JavaScript e CSS apropriados para enviar ao navegador. Esse processo gera páginas da Web mais rápidas, levando a uma melhor experiência do usuário.

Se você deseja utilizar uma biblioteca JavaScript externa em seu projeto, pode importá-la diretamente para seu .svelte arquivo e usá-lo sem a necessidade de um wrapper (ao contrário do React).