Vanilla Extract: CSS-in-JS ohne Laufzeit
Schreiben Sie typsicheres CSS mit Vanilla Extract, das zur Build-Zeit statische CSS-Dateien erzeugt.
Vanilla Extract: CSS-in-JS ohne Laufzeit ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Vanilla Extract?
Vanilla Extract ist eine CSS-in-JS-Bibliothek, die keinerlei Laufzeit-Overhead erzeugt. CSS wird in TypeScript definiert und zur Build-Zeit in statische CSS-Dateien kompiliert – so erhalten Sie Typsicherheit ohne das Einfügen von Styles zur Laufzeit.
Grundprinzip
Anders als styled-components oder Emotion läuft Vanilla Extract vollständig zur Build-Zeit. Der JavaScript-Import dient als API zum Erstellen der Styles; als Ausgabe entstehen einfache CSS-Dateien. Auf dem Client wird kein JavaScript ausgeführt, um Styles anzuwenden.
Dateikonvention
Vanilla-Extract-Dateien verwenden die Erweiterung .css.ts:
// button.css.ts
import { style } from '@vanilla-extract/css';
export const button = style({
background: 'royalblue',
color: 'white',
padding: '10px 20px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
background: '#2563eb'
}
});Verwendung in Komponenten
Importieren Sie den exportierten Klassennamen und wenden Sie ihn an:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Theme-Contracts
Die leistungsfähigste Funktion von Vanilla Extract: Definieren Sie einen Theme-Contract (eine Token-Struktur) und erstellen Sie mehrere Themes, die diesen implementieren:
import { createTheme, createThemeContract } from '@vanilla-extract/css';
const contract = createThemeContract({
color: { primary: null, bg: null }
});
export const lightTheme = createTheme(contract, {
color: { primary: '#3b82f6', bg: '#ffffff' }
});
export const darkTheme = createTheme(contract, {
color: { primary: '#60a5fa', bg: '#111827' }
});styleVariants
Erstellen Sie mehrere Varianten eines Styles, ohne Code zu wiederholen:
import { styleVariants } from '@vanilla-extract/css';
export const variants = styleVariants({
primary: { background: 'royalblue' },
danger: { background: 'crimson' },
ghost: { background: 'transparent', border: '1px solid royalblue' }
});
// <Button className={variants[variant]}>Recipes mit @vanilla-extract/recipes
Die Funktion recipe aus dem Recipes-Paket kombiniert Basis-Styles und Varianten auf elegante Weise:
import { recipe } from '@vanilla-extract/recipes';
export const button = recipe({
base: { padding: '10px 20px', borderRadius: '4px' },
variants: {
color: {
primary: { background: 'royalblue', color: 'white' },
danger: { background: 'crimson', color: 'white' }
},
size: {
sm: { fontSize: '0.875rem' },
lg: { fontSize: '1.25rem' }
}
}
});Sprinkles für Utility-Klassen
@vanilla-extract/sprinkles generiert aus einem Token-Set Utility-Klassen – ähnlich wie ein typsicheres Tailwind ohne Laufzeitkosten:
Typsicherheit
Da Styles als TypeScript-Objekte vorliegen, erhalten Sie vollständige IDE-Autovervollständigung und Typprüfung für CSS-Eigenschaftsnamen und -werte. Tippfehler in Eigenschaftsnamen werden bereits zur Build-Zeit und nicht erst zur Laufzeit erkannt.
Integration in Build-Tools
Vanilla Extract lässt sich über spezielle Adapter in Vite, webpack, esbuild und Next.js integrieren. Das extrahierte CSS wird als statische Datei ausgeliefert.
Wann Sie Vanilla Extract wählen sollten
Wählen Sie Vanilla Extract, wenn Sie Folgendes benötigen:
- vollständige TypeScript-Typsicherheit für Ihre Styles
- keinerlei CSS-in-JS-Overhead zur Laufzeit
- statische CSS-Ausgabe für maximale Performance
- ein robustes Theming-System mit typgeprüften Token-Contracts
Schnelltest
Welchen entscheidenden Performancevorteil bietet Vanilla Extract gegenüber CSS-in-JS-Lösungen mit Laufzeitverarbeitung wie styled-components?
Zusammenfassung
Vanilla Extract ist eine TypeScript-orientierte CSS-in-JS-Bibliothek ohne Laufzeitkosten. Definieren Sie Styles in .css.ts-Dateien mithilfe typsicherer JavaScript-Objekte. Zur Build-Zeit werden statische CSS-Dateien erzeugt. Theme-Contracts ermöglichen typgeprüfte Unterstützung für mehrere Themes. styleVariants und recipe verwalten Komponentenvarianten auf elegante Weise. Durch die fehlenden Laufzeitkosten eignet sich Vanilla Extract ideal für performancekritische Anwendungen.
Häufig gestellte Fragen
Ist die Lektion „Vanilla Extract: CSS-in-JS ohne Laufzeit“ kostenlos?
Ja — der vollständige Text von „Vanilla Extract: CSS-in-JS ohne Laufzeit“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Vanilla Extract: CSS-in-JS ohne Laufzeit“?
Schreiben Sie typsicheres CSS mit Vanilla Extract, das zur Build-Zeit statische CSS-Dateien erzeugt. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Vanilla Extract: CSS-in-JS ohne Laufzeit“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Styled-components: getaggte Template-Literale
- Emotion: css() und styled()
- CSS Modules: lokale Stile
- Vanilla Extract: CSS-in-JS ohne Laufzeit