Importar hojas de estilo externas
Cuando todo vaya a ser global, será más eficiente tener una hoja de estilos externa que importemos desde JavaScript. Esta técnica también la podemos usar para importar hojas de estilo procedentes de npm, que se ponen en el bloque script, por raro que parezca.
Este vídeo lamentablemente todavía no tiene notas de episodio. Todavía quedan algunos vídeos en este sitio web que no tienen artículos de texto por si te gusta más leer que ver vídeos, y parece que esta página es una de ellas. Hay una transcripción del audio disponible para ayudarte a llegar a este vídeo que puede que te ayude.
¡Ayúdame a saber qué es prioritario y qué no! ¿Te hubiese ayudado encontrar un artículo de texto en esta página junto al vídeo?
Desplegar transcripción del episodio
Hola a todas, hola a todos, cómo estáis, bienvenidos un día más a makigas.
Creo que dije que ya iba a acabar con CSS, pero me he dado cuenta que me he dejado un tema fuera. Vamos a aprovechar que todavía no ha visto la luz el vídeo anterior para hacer un pequeño parcheo... aunque esto lo veréis después de hablar de las globales. Precisamente sobre eso quiero hablar hoy.
Os he contado que con el pseudoselector global
podéis hacer estilos globales que no lleven sufijos para que funcionen con todos los componentes. Algo como ponerle un body y ponerle font-family... siempre le pongo lo mismo, le voy a poner Impact por ponerle algo diferente. ¡Madre mía, parece un meme!
Ya vimos que con global podemos hacer estilos globales que no se vean afectados por un selector concreto y que alteren todo el documento. El tema es que esto no es muy recomendable en caso de que vayamos a hacer un componente global donde todos los estilos sean globales. Si estás haciendo la raíz de tu aplicación, no es recomendable que tengas global-global-global, debido a que esto provoca un exceso de sobrecarga, porque aun así tiene que procesar los estilos que pongas acá.
En ese caso, lo que se recomienda es que los estilos globales se proporcionen a través de una hoja de estilo. Por ejemplo, yo crearía en el directorio assets un archivo llamado global.css. Aquí pondría body, y vamos a ponerle las propiedades de siempre, vamos a ponerle... no sé qué ponerle... Verdana, por ejemplo. Ya que estamos con Verdana vamos a ponerle fondo verde. Algo que no sea muy desagradable a la vista.
Dejaría los estilos globales en un archivo separado. Claro, ahora lo tendría que importar: ¿cómo lo hago? Esto le va a sonar raro a la gente que nunca haya hecho esto, pero lo vamos a importar directamente desde la sección del script. Esto a primera vista no tiene mucho sentido y es coherente. Dices: pero el estilo que estoy importando es CSS, ¿no tendría que ir en un style con un import?
No, directamente lo vas a importar en la etiqueta script. Igual que importas un .svelte, con esto de los transpiladores hoy día lo que se pone en un import es un concepto un poco relativo. Tú puedes importar cualquier cosa. Por ejemplo, podría importar ./assets/global.css.
Cuando importo una hoja de estilos global, aquí veis el resultado instantáneamente. Si le pongo un import, esto se pone dentro de la hoja que se genera. Tened en cuenta que aunque se esté importando un CSS en una etiqueta SCRIPT, evidentemente esto no va a funcionar así, se supone que lo hace bien. Digamos que poner un import de un CSS lo que provoca es que el transpilador antes de generar las hojas de estilo incluya también cualquier otro CSS que se esté importando. Es como que el compilador sabe separar los CSS de los JavaScript así que al final todo puede ser un import.
Esta sería la forma de hacerlo: esto también nos vale si estamos importando otras bibliotecas, como... bootstrap, bulma, la que corresponda. Si yo instalase dentro de mi proyecto alguna cosa como normalize.css, que es un framework para importar una hoja de estilos común para todos los navegadores, si yo ahora importase normalize.css/normalize.css, que sería la ruta a la hoja de estilo dentro del paquete que me acabo de bajar de NPM, la consecuencia sería que se cargaría esa hoja de estilo también y se aplicaría dentro de la aplicación. En consecuencia, veré que cualquier estilo que importe, sea normalize, bootstrap, o un tailwind precompilado, el framework que más te guste, lo podrías importar así. Si vas a importar una biblioteca de componentes y necesitas un framework como materialize, que sepas que esta es la forma recomendada de hacerlo, y no simplemente tener los globals y los imports y todo ese tipo de historias.
Por cierto, ya que estamos, aunque esto no sea importar hojas de estilo, os voy a contar que esto también vale, por ejemplo, para importar archivos PNG. Si haces un import ./assets/svelte.png, esto como tal no va a tener ninguna consecuencia, porque esto no lo puedes incorporar a un archivo grande. Pero si yo importo como una variable, esta variable llamada svelte ahora contendrá, casualmente, la ruta a la imagen que he importado. Esto es bueno porque ahora lo que puedo hacer es ponerlo en una etiqueta IMG, y mostrarla así sin más. Esto puede ser interesante. ¿Qué warning? Ah, que no puse alt. Svelte, da igual, es un ejemplo.
Nos vemos en próximos vídeos, un saludo, hasta luego.