Estilos CSS y su alcance

Empezamos rematando un poco algunos flecos del portfolio que estamos montando.

Añadiendo componentes de navegación ¶

Crea NavBar.astro en /src/components y copia y pega este contenido allí.

/src/components/NavBar.astro

<header
  class="d-flex flex-wrap justify-content-center justify-content-sm-between px-4 py-3 mb-4 border-bottom"
>
  <a
    href="/"
    class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"
  >
    <span class="fs-4">Mi Astro Web</span>
  </a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="/" class="nav-link">Inicio</a>
    </li>
    <li class="nav-item"><a href="/about" class="nav-link">Sobre mí</a></li>
  </ul>
</header>

Y ahora lo mismo con Footer.astro.

/src/components/Footer.astro

<footer class="mt-4 border-top fixed-bottom bg-primary">
  <p class="text-center text-white">
    <small>Creado gracias al bootcamp de <a href="https://webreactiva.com">Web Reactiva</a></small>
  </p>
</footer>

👀 En este caso nos basta con tener componentes estáticos. Fíjate como no hemos usado el separador --- ya que no es obligatorio si no vas a emplear el poder de JavaScript.

⚡️ El enlace no se ve del todo bien, pronto lo vamos a arreglar.

💦 Piensa un momento en dónde crees que puedes incorporar estos componentes en tu código. Es una decisión importante, ¡es arquitectura de software!

¡Exacto!

Es en Sitelayout.astro nuestro “supercomponente” que nos deja tener elementos comunes en toda la web.

Así quedaría la parte del body y los imports.

/src/layouts/SiteLayout.astro

---
import Footer from "../components/Footer.astro";
import NavBar from "../components/NavBar.astro";
const {title} = Astro.props 
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>{title}</title>
  </head>
  <body>
    <NavBar></NavBar>
    <slot />
    <Footer></Footer>
  </body>
</html>

Estilos CSS y alcance ¶

Una parte que no hemos visto hasta ahora de los componentes .astro es su capacidad para soportar definiciones de estilos CSS.

Corrijamos el color del enlace en el componente Footer. Podríamos hacerlo sin ningún problema con las clases de Bootstrap, pero lo haremos más divertido.

Añade en Footer.astro esto al final:

<style>
  a {
    color: white;
  }
</style>

💣 ¿Demasiado arriesgado? Parece que va a cambiar TODOS los enlaces para que tengan color blanco.

Pues no.

🔍 Recuerda que Astro hace cosas por nosotros y en este caso este estilo esta solo en el alcance (scope) del componente Footer.

💦 Abre en el navegador las herramientas de desarrollador y comprueba como el estilo aplicado a <a> en el Footer tiene unos caracteres extra que lo hacen único.

Estilos globales

Veamos como hacer una definición de estilo CSS global para todo el sitio.

Abre SiteLayout.astro y escribe esto al final:

<style is:global>
  body {
    background-color: lemonchiffon;
  }
</style>

Aparecerá un fondo parecido al amarillo en el fondo de todas las páginas de la web. Si bien es cierto que el componente de layout afecta a todas las páginas, es una buena práctica usar el modificador is:global para que Astro sepa que todos los body deben tener ese color de fondo.

👀 Considero una buena práctica aunar los estilos globales en un solo componente o en un fichero CSS específico para que luego, si el proyecto crece, no nos volvamos locos buscando donde está.

⚡️ Pon a prueba lo que has aprendido

1. ¿Cómo se pueden incorporar estilos CSS en un componente Astro?

2. ¿Cómo se aplican estilos CSS globales en Astro?

3. ¿Cómo se asegura Astro de que los estilos CSS aplicados a un componente no afecten a otros componentes?