En Svelte, los estilos que definimos dentro de un componente están encapsulados por defecto, lo que significa que cada selector CSS se modifica internamente para evitar conflictos entre componentes que puedan compartir nombres de clases o etiquetas. Esto es muy útil para mantener el aislamiento y la coherencia visual en aplicaciones complejas. Sin embargo, hay situaciones en las que necesitamos aplicar estilos que afecten a toda la aplicación, y para eso existen los estilos globales.
Cuando queremos que un estilo afecte a toda la aplicación, como por ejemplo definir la tipografía base o el color de fondo general, no basta con escribir un selector normal como body dentro del componente, porque ese estilo no tendrá efecto fuera del ámbito del componente. Para lograr que un selector sea global, Svelte nos permite usar el modificador :global(). Por ejemplo, si queremos cambiar la fuente y el tamaño de letra del body, escribiremos:
:global(body) {
font-family: Arial, sans-serif;
font-size: 24px;
}
Esto genera CSS sin ningún sufijo ni aislamiento, por lo que el estilo se aplica a toda la aplicación. Es importante tener en cuenta que al usar :global(), el estilo se vuelve verdaderamente global, y cualquier componente que importe ese CSS verá afectado ese estilo. Por eso, debemos usarlo con precaución y preferiblemente limitar los estilos globales a componentes raíz o a aquellos que definan la base visual de la aplicación.
Un ejemplo claro de los riesgos de abusar de los estilos globales es cuando aplicamos un estilo global a un selector común como label. Si escribimos:
:global(label) {
color: red;
}
entonces todas las etiquetas label en toda la aplicación se mostrarán en rojo, no solo las que estén dentro del componente donde definimos ese estilo. Esto puede generar efectos no deseados y conflictos visuales, por lo que es mejor evitar estilos globales en componentes pequeños o muy específicos.
Otro caso donde el uso de estilos globales es casi obligatorio es con el selector universal *. Por ejemplo, para aplicar un box-sizing: border-box a todos los elementos, que es una práctica recomendada para evitar problemas de tamaño en los componentes, debemos escribir:
:global(*) {
box-sizing: border-box;
}
Esto asegura que todos los elementos de la aplicación calculen sus dimensiones incluyendo el padding y el borde, evitando que el tamaño total se descontrole cuando añadimos espacios internos.
En resumen, el modificador :global() en Svelte es una herramienta poderosa para definir estilos que deben afectar a toda la aplicación, pero hay que usarlo con cuidado para no perder el aislamiento que nos ofrece el scoped CSS. Lo ideal es reservar los estilos globales para definiciones base como tipografía, colores generales o reglas universales como el box-sizing, y mantener el resto de estilos encapsulados dentro de cada componente para evitar conflictos y mantener un diseño coherente y mantenible.