Design-Systeme mit --var und @property
Hardcodierte Farbwerte, die an zwanzig Stellen geändert werden müssen — das ist das Symptom eines fehlenden Theming-Systems. CSS Custom Properties schaffen die Grundlage für wartbare Design-Systeme: ein Ort für jeden Wert, kaskadierendes Überschreiben auf Komponentenebene und Dark Mode ohne eine Zeile JavaScript.
Inhaltsverzeichnis
- 1. Was CSS Custom Properties vom Präprozessor-Variablen unterscheidet
- 2. Syntax und Scoping: --var und :root
- 3. Fallback-Werte und defensive Programmierung
- 4. Dark Mode ohne JavaScript: prefers-color-scheme
- 5. Component-Theming: Variablen auf Element-Ebene
- 6. @property: typisierte CSS Custom Properties
- 7. @property für animierbare Eigenschaften
- 8. Design Tokens mit CSS Custom Properties
- 9. Custom Properties vs. Sass-Variablen