Estilos, assets e imágenes
Una de las ventajas de Astro es que no te obliga a una sola forma de estilado. Eso es libertad, pero también te obliga a poner orden.
Estilos en Astro
Puedes tener:
- CSS global
- CSS por componente
- módulos CSS
- Tailwind u otras integraciones
Lo importante al empezar es no mezclarlo todo sin criterio.
Una estrategia simple y buena
- global para resets, variables y base tipográfica
- estilos de componente para piezas concretas
- layouts para reglas estructurales
Eso te da una separación bastante limpia.
public vs src/assets
Esta distinción es importante:
public/
Va tal cual al build. Ideal para:
- favicon
- robots.txt
- archivos estáticos sin procesar
src/assets/
Pasa por el pipeline de Astro/Vite. Ideal para:
- imágenes del proyecto
- recursos que quieres optimizar
Imágenes
Si una imagen forma parte del diseño del sitio, suele compensar traerla a src/assets y procesarla con Astro.
Si es una URL externa o un archivo que debe servirse tal cual, puede quedarse fuera.
La decisión práctica
Piensa así:
- ¿esta imagen es parte del sistema visual?
src/assets - ¿es un archivo público simple?
public - ¿viene de CMS o CDN? probablemente URL externa o fetch
No conviertas cada imagen en un problema
Al empezar, no intentes optimizarlo todo con obsesión. Lo importante es tener claro:
- qué imágenes son locales
- cuáles son externas
- cuáles deben cargar rápido
Luego ya afinas formatos, tamaños y prioridades.
En la siguiente lección llegamos a una de las señas de identidad de Astro: islands y directivas client:*.