Scope CSS: Astro vs Frameworks JS

Entender cómo tu framework maneja los estilos CSS es crucial para evitar conflictos y mantener tu código limpio. No todos los frameworks funcionan igual, y Astro tiene una aproximación muy particular.

El enfoque “Normal” (React/Vue puros)

En el ecosistema tradicional de React, si importas un archivo CSS en un componente, ese CSS suele ser global.

import './Button.css'; // ¡PELIGRO! Esto es global

export const Button = () => <button className="btn">Click</button>;

import './Button.css'; // ¡PELIGRO! Esto es global

export const Button = () => <button className="btn">Click</button>;

.btn { color: red; } /* Afecta a TODOS los elementos con clase .btn de la web */

.btn { color: red; } /* Afecta a TODOS los elementos con clase .btn de la web */

Para evitar esto, en React solemos usar CSS Modules (Button.module.css) o librerías CSS-in-JS (Styled Components, Emotion).

El enfoque de Astro: Scoped por defecto

Astro invierte esta lógica por defecto. Cuando escribes estilos dentro de la etiqueta <style> en un componente .astro, están automáticamente aislados (scoped).

---
// Tu JS
---
<div class="card">
  <h1>Hola</h1>
</div>

<style>
  /* Esto SOLO afecta a este componente */
  .card { background: blue; }
  h1 { color: white; }
</style>

---
// Tu JS
---
<div class="card">
  <h1>Hola</h1>
</div>

<style>
  /* Esto SOLO afecta a este componente */
  .card { background: blue; }
  h1 { color: white; }
</style>

Astro logra esto añadiendo una clase hash única a tus elementos (ej: .card.astro-HASH123) en tiempo de compilación.

¿Cuándo usar qué?

1. Estilos del Componente: Usa siempre la etiqueta <style> al final del archivo .astro. Es seguro, no requiere configuración extra y se elimina automáticamente si el componente no se usa.
2. Estilos Globales: Si necesitas algo que afecte a toda la web (como resets, fuentes o utilities), usa un archivo .css en src/styles/ e impórtalo en tu Layout principal.
3. CSS Modules: Úsalos solo si prefieres separar los estilos en archivos distintos pero manteniendo el scope (ej: Component.module.css), aunque en Astro suele ser redundante.

Resumen

En Astro, Co-locación es la clave. Mantén tus estilos junto a tu HTML en el mismo archivo.

Co-locación: La práctica de agrupar el código por responsabilidad (ej: un componente) en lugar de por tecnología (archivos separados .html, .js, .css).

Ganarás en mantenibilidad y rendimiento.