¿Cómo estilizar componentes en Svelte?

Estilizar componentes en Svelte es un proceso que ofrece mucha flexibilidad y poder. En Svelte, puedes aplicar estilos específicos a cada componente, y también puedes definir estilos globales que apliquen a tu aplicación completa. Esta capacidad para manejar tanto estilos específicos como globales es esencial para crear aplicaciones responsivas y visualmente atractivas.

¿Cómo se estructuran los estilos de un componente?

Cada componente en Svelte puede contener su propio bloque <style>, donde especificas los estilos CSS particulares de ese componente. Por ejemplo, dentro del componente app, puedes tener la lógica del componente en un bloque <script>, y los estilos correspondientes en un bloque <style>.

fullscreen
<style>
  main {
    // estilos específicos del componente
  }

  @media (max-width: 600px) {
    main {
      // estilos responsive
    }
  }
</style>

Para modificar contenido, como el saludo inicial, simplemente edita el HTML del componente:

fullscreen
<main>
  <h1>Hello, Óscar Barajas</h1>
</main>

¿Cómo aplicar estilos globales?

Para aplicar estilos a nivel de toda la aplicación, usas la pseudo-clase :global. Esto permite que los estilos se apliquen no solo al componente actual, sino a toda la aplicación.

fullscreen
<style>
  :global(body) {
    background-color: #f2eee2; // color de fondo crema
    color: #0084f6; // texto azul
  }
</style>

¿Cómo usar variables CSS en Svelte?

Las variables CSS permiten definir valores reutilizables a lo largo de tus estilos, haciéndolos más manejables y fáciles de actualizar. Defínelas usando :global(:root) para que sean accesibles en toda tu aplicación.

fullscreen
<style>
  :global(:root) {
    --dem-color: purple; // establece color púrpura
  }

  p {
    color: var(--dem-color);
  }
</style>

¿Cómo añadir nuevos elementos al documento?

Añadir nuevos elementos HTML y estilos a tu documento en Svelte es sencillo. Primero, defines el contenido en HTML, y luego lo estilizas en el bloque CSS. Por ejemplo, si quieres añadir y manipular una imagen:

fullscreen
<script>
  let svelteLogo = "https://arepa.s3.amazonaws.com/svelte-logo.png";
</script>

<img src="{svelteLogo}" alt="Svelte Logo">

Luego puedes estilizarla según tus necesidades:

fullscreen
<style>
  main img {
    width: 30%;
  }
</style>

El uso de variables como let svelteLogo permite manejar recursos externos de forma dinámica y clara.

¿Cómo crear aplicaciones Svelte visualmente efectivas?

Para desarrollar aplicaciones efectivas con Svelte, trabaja tus estilos de manera organizada, empleando tanto estilos locales como globales cuando sea necesario. Usa variables CSS para mantener consistencia y flexibilidad en tu diseño, específicamente cuando trabajas con una paleta de colores o el branding de tu marca.

Además, no olvides aprovechar las consultas de medios (media queries) para crear diseños responsivos, asegurando que tu aplicación se vea bien en cualquier dispositivo. Con estas prácticas, llevarás tus aplicaciones al siguiente nivel.

¡Continúa practicando y experimentando con los estilos en Svelte, y observa cómo tus habilidades de desarrollo frontal mejoran y tu creatividad se refleja en cada aplicación que creas!