Manejo de Estilos CSS en Svelte

---

Estilos Scoped en Svelte

En Svelte, los estilos se definen dentro de las etiquetas <style>. En Svelte, los estilos por defecto son scoped, lo que significa que se aplican solo al componente en el que están definidos. Esto evita que los estilos afecten a otros componentes, manteniendo un aislamiento completo de los estilos. Los estilos scoped son ideales para asegurarse de que un componente no interfiera con otros.

Ejemplo de Estilos Scoped:

<script>
let color = "blue";
</script>

<style>
p {
  color: {color};
}
</style>

<p>Este párrafo será azul.</p>

En este escenario, el estilo solo se aplica al párrafo dentro del componente Svelte actual.

Estilos Globales

A veces es necesario aplicar estilos globales que afecten a toda la aplicación, como en el caso de estilos de fuentes, márgenes generales, etc. Para aplicar estilos globales en Svelte, puedes usar la palabra clave :global dentro de las etiquetas <style>.

Ejemplo de Estilos Globales:

<style>
:global(body) {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
</style>

Aquí, el estilo se aplica a la etiqueta body de toda la página, no solo al componente actual.

Estilos Combinados

También puedes combinar estilos scoped y globales en un mismo componente. Esto es útil cuando quieres que algunos estilos sean locales al componente y otros sean globales.

Ejemplo de Estilos Combinados:

<script>
let backgroundColor = "lightblue";
</script>

<style>
p {
  color: red;
}

:global(body) {
  background-color: {backgroundColor};
}
</style>

<p>Este párrafo será rojo, y el fondo de la página será lightblue.</p>

Estilos en Archivos Externos en Svelte

Estilos Específicos para un Componente

También puedes definir estilos en archivos CSS separados y aplicarlos a componentes específicos. Esto ayuda a organizar mejor el código y reutilizar estilos en varios componentes.

Ejemplo de Estilos en un Archivo CSS para un Componente

MiComponente.svelte

<script>
import "./MiComponente.css";
</script>

<p>Este párrafo tendrá los estilos definidos en MiComponente.css</p>

MiComponente.css

p {
color: green;
font-weight: bold;
}

En este caso, los estilos definidos en MiComponente.css solo afectarán a MiComponente.svelte.

Estilos Globales en un Archivo Externo

Si deseas aplicar estilos globales en toda la aplicación, puedes definirlos en un archivo CSS global y enlazarlos en el punto de entrada de la aplicación.

Ejemplo de Estilos Globales en un Archivo Externo

global.css

body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

Luego, en tu archivo de entrada (por ejemplo, App.svelte o main.js), importas los estilos globales:

main.js

import "./global.css";
import App from "./App.svelte";

const app = new App({
target: document.body,
});

export default app;

De esta forma, los estilos de global.css se aplicarán a toda la aplicación.