Styling

Externe Stylesheets einbinden

Astro unterstützt das Einbinden von externen Stylesheets natürlich via normalen <link>-Tag.

<head>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
    />
</head>

Wir können CSS in Astro importieren. Das geht über die ESM Module import syntax.

---
import "../../styles/import.css";
---

Dies wirkt nur auf der Seite auf der wir das CSS importieren und auch nur dort eingebettet.

Ein weitere Möglichkeit ist das hinzufügen von CSS in der Component bzw. Page selbst.

Wenn wir in die ìndex.astro einfach ein <style> Tag einfügen, dann wird das CSS nur auf dieser Seite angewendet.

<style>
  h1 {
    color: blue;
  }
</style>

Astro erledigt das Scoping des CSS und optimiert die Styles über das Projekt. Dieses CSS “überwiegt” das vorher importierte CSS.

Das liegt daran dass das scoped CSS in der Regel als letztes in den Head eingefügt wird.

Wie gerade schon angeteaserd, können wir auch globale Styles aus einer Page/Component definieren.

<style is:global>
  h1 { color: blue; }
</style>

Dieses CSS wird auf allen Seiten angewendet.

Ein scoped CSS in einzelnen Pages hat die Chance das globale wieder zu überschreiben.

Können weil die Spezifität des CSS hier entsprechend der CSS Kaskade weiterhin greift.

Vorsicht: auch scoped CSS kann in Komponente auch auf eingebundene Komponenten wirken, weil sie im DOM ja auch teil des Elternelements sind.

Astro kompiliert das CSS und entfernt nicht benötigte Styles.

Kleine Stylesheets werden in den Head eingebettet, größere Stylesheets werden in eigene Dateien ausgelagert.

Weiterhin werden mehrfach verwendete Styles auf eigene Chunks aufgeteilt und auf mehreren Seiten wiederverwendet.