Estrategias de estilos en Astro

Aplica estilos globales y locales con criterio para mantener orden visual en proyectos Astro.

En Astro puedes combinar estilos globales y estilos acotados por componente.

La clave no es usar una sola técnica, sino decidir cuándo conviene cada una.

Definir tokens de color y espaciado desde el inicio evita inconsistencias visuales.

También es buen momento para preparar base responsive y tipografía.

  • Separar responsabilidades visuales evita caos.
  • Global: reset, tipografía, variables y utilidades comunes.
  • Local: estilos propios de cada componente.
  • No dupliques reglas de diseño en cada archivo.
  • Documenta tokens para que el equipo mantenga consistencia.

Global vs local

Separar responsabilidades visuales evita caos.

  • Global: reset, tipografía, variables y utilidades comunes.
  • Local: estilos propios de cada componente.
  • No dupliques reglas de diseño en cada archivo.
  • Documenta tokens para que el equipo mantenga consistencia.

Sistema mínimo de tokens

Con pocas variables puedes estabilizar todo el UI.

Astro
05

Estrategias de estilos en Astro

Aplica estilos globales y locales con criterio para mantener orden visual en proyectos Astro.

Código del tema: Componentes Astro + render hibrido

📘 Teoría

Global vs local

Separar responsabilidades visuales evita caos.

  • Global: reset, tipografía, variables y utilidades comunes.
  • Local: estilos propios de cada componente.
  • No dupliques reglas de diseño en cada archivo.
  • Documenta tokens para que el equipo mantenga consistencia.

Sistema mínimo de tokens

Con pocas variables puedes estabilizar todo el UI.

🧪 Aprende probando

Ejemplo Bloque visual consistente Ejemplo de uso de tokens en una tarjeta.

🏁 Retos

Reto Reto: usar variable primaria Aplica una variable CSS para el color de título.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com