Astro-Kurs 17: CSS sauber organisieren

Etappe 2 – Lektion 17 von 22 · Modellbau-Werkstatt
Voraussetzungen: Etappe 1 (Teile 1–11); ab Teil 13 auch die jeweils vorherige Lektion.

Lernziel: Du strukturierst Farben, Abstände und wiederverwendbare Styles.

1. Lokales CSS und globales CSS

Astro-Styles in einer Komponente betreffen standardmäßig nur deren Ausgabe. Grundregeln für Schriftart, Seitenhintergrund und Farben wollen wir jedoch gemeinsam nutzen.

Lege src/styles/global.css an:

:root {
  --farbe-haupt: #176b98;
  --farbe-text: #243447;
  --farbe-hintergrund: #f5f8fa;
  --abstand: 1rem;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}
a { color: var(--farbe-haupt); }
img { max-width: 100%; height: auto; }

Importiere die Datei ganz oben in src/layouts/BasisLayout.astro im Frontmatter:

---
import '../styles/global.css';
interface Props { title: string; }
const { title } = Astro.props;
---

Achtung: Ersetze nur den bisherigen Frontmatter-Block durch diese Variante; das HTML des Layouts bleibt bestehen. Die bisherigen globalen Regeln im Layout sollten entfernt oder auf layout-spezifische Regeln reduziert werden, damit CSS nicht doppelt definiert wird.

2. CSS-Variablen

var(--farbe-haupt) greift auf eine zentrale Farbdefinition zu. Änderst du die Variable, passen sich alle entsprechenden Elemente an.

3. Regeln für Ordnung

Verwende globale CSS-Regeln für Schriftarten, Grundfarben und Reset; komponentenbezogene Regeln bleiben in <style> der Komponente. Wähle aussagekräftige Klassennamen statt vieler unübersichtlicher Selektoren.

Übung

Definiere --farbe-akzent: #e48b34; in :root und verwende die Variable für einen farbigen Hinweis in Hinweis.astro.

Alle Beispiele beziehen sich auf ein eigenes Astro-Übungsprojekt. Die Dateipfade sind relativ zum Projekt-Hauptordner angegeben. Die Kursdateien selbst gehören in das Content-Verzeichnis der Know-How-Schmiede, nicht in das Übungsprojekt.