Stilwiederholungen mit CSS-Funktionen reduzieren

Die Verwaltung großer Stylesheets führt oft zu sich wiederholender Logik, insbesondere bei Designsystem-Tokens wie Farbverläufen oder responsiven Layoutmustern.

Mit der CSS-At-Regel @function können Sie diese Logik in wiederverwendbare, parametrisierte Funktionen kapseln. So wird Ihr CSS wartungsfreundlicher, konsistenter und DRY (Don't Repeat Yourself).

Die @function-Syntax

Eine benutzerdefinierte Funktion wird mit der Regel @function definiert, gefolgt von einem Namen mit Bindestrich und einer Liste von Parametern. Die Funktion gibt einen Wert mit der Property result zurück.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

Schlüsselkonzepte

• Parameter: Müssen mit einem doppelten Bindestrich (--) beginnen.
• Standardwerte: Sie können Standardwerte mit einem Doppelpunkt (:) angeben.
• Ergebnis: Das Attribut result bestimmt den Wert, den die Funktion zurückgibt. Der letzte im Funktionskörper deklarierte result wird verwendet.
• Geltungsbereich: Parameter und Variablen, die innerhalb der Funktion definiert sind, haben einen lokalen Geltungsbereich.
• Typen: Sie können festlegen, dass Parameter und der zurückgegebene Wert mit einem CSS-Typ in Klammerschreibweise (z.B. <color>) übereinstimmen müssen, und mit der Funktion type mehrere Typen zulassen (z.B. type(<number> | <percentage>)).

Praxisbeispiele

1. Designsystem-Tokens (Farbverläufe)

Sorgen Sie für einheitliche Farbverläufe in Ihrer App, indem Sie die Farbverlaufslogik kapseln. --angle bietet einen Standardwert, um Konsistenz zu gewährleisten, der überschrieben werden kann.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. Bedingte Layoutlogik

Sie können @media oder andere Abfragen direkt in einer Funktion verwenden, um je nach Umgebung unterschiedliche Werte zurückzugeben. Wenn Sie bedingte Logik in einer Funktion verwenden, beachten Sie, dass @function nicht beim ersten Wert von result „zurückgegeben“ wird, sondern der CSS-Kaskade folgt und den letzten Wert auflöst, der basierend auf der Bildschirmgröße, Containergröße oder anderen Abfrage übereinstimmt.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

Best Practices

• Namen mit Bindestrichen verwenden: Stellen Sie Ihren Funktionsnamen und Parametern immer -- voran.
• Standardwerte bereitstellen: Machen Sie Ihre Funktionen robuster, indem Sie sinnvolle Standardwerte angeben.
• Keep it Simple: Verwenden Sie Funktionen für Logik, die tatsächlich wiederholt wird oder komplex ist. Übertreiben Sie es nicht mit einfachen Attribut/Wert-Paaren.
• Typen verwenden: Achten Sie darauf, dass Ihre Parameter und Rückgabewerte die erwarteten Typen haben.
• Vorkompilierte Alternativen in Betracht ziehen: Für Funktionen, die nicht von Nutzereingaben, Medienabfragen oder anderen clientseitigen Varianten abhängen, sollten Sie einen CSS-Precompiler verwenden, um unnötige Arbeit auf dem Client zu vermeiden.

Fallback-Strategien

In Browsern, die CSS-Funktionen nicht unterstützen, sind Werte, die mit CSS-Funktionen festgelegt wurden, ungültig. Wenn Sie andere Browser unterstützen möchten, geben Sie zuerst einen Fallback-Wert für das Attribut an. In Browsern mit Unterstützung für CSS-Funktionen wird dies überschrieben.

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

Wenn Sie die Wiederholung von Stilen reduzieren und gleichzeitig andere Browser unterstützen möchten, sollten Sie einen CSS-Precompiler mit Funktionen wie Sass in Betracht ziehen.