Ograniczanie powtarzania stylów za pomocą funkcji CSS

Funkcje internetowe: @function

Utrzymywanie dużych arkuszy stylów często prowadzi do powtarzania logiki, zwłaszcza w przypadku tokenów systemu projektowania, takich jak gradienty czy wzorce układu elastycznego.

Reguła at-rule @function w CSS umożliwia hermetyzację tej logiki w funkcjach wielokrotnego użytku z parametrami, dzięki czemu kod CSS jest łatwiejszy w utrzymaniu, spójny i zgodny z zasadą DRY (Don't Repeat Yourself).

Składnia @function

Funkcja niestandardowa jest definiowana za pomocą reguły @function, po której następuje nazwa z myślnikiem i lista parametrów. Funkcja zwraca wartość za pomocą właściwości result. 

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

Kluczowe pojęcia

  • Parametry: muszą zaczynać się od podwójnego łącznika (--).
  • Wartości domyślne: możesz podać wartości domyślne, używając dwukropka (:).
  • Wynik: właściwość result określa wartość zwracaną przez funkcję. Wygrywa ostatni element result zadeklarowany w treści funkcji.
  • Zakres: parametry i zmienne zdefiniowane w funkcji mają zakres lokalny.
  • Typy: możesz wymagać, aby parametry i zwracana wartość były zgodne z typem CSS z notacją nawiasową (np. <color>), i zezwalać na wiele typów za pomocą funkcji type (np. type(<number> | <percentage>)).

Przykłady praktyczne

1. Tokeny systemu projektowania (gradienty)

Zapewnij spójne gradienty kolorów w aplikacji, hermetyzując logikę gradientu. --angle podaje wartość domyślną, która zapewnia spójność i którą można zastąpić.

@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. Logika układu warunkowego

Możesz używać zapytania @media lub innych zapytań bezpośrednio w funkcji, aby zwracać różne wartości w zależności od środowiska. Gdy używasz logiki warunkowej w funkcji, pamiętaj, że @function nie „zwraca” pierwszej wartości result, ale działa kaskadowo i rozwiązuje ostatnią wartość, która pasuje do rozmiaru ekranu, rozmiaru kontenera lub innego zapytania.

@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);
}

Sprawdzone metody

  • Używaj nazw z myślnikami: zawsze dodawaj prefiks -- do nazw funkcji i parametrów.
  • Podawaj wartości domyślne: zwiększaj niezawodność funkcji, podając odpowiednie wartości domyślne.
  • Zachowaj prostotę: używaj funkcji w przypadku logiki, która jest powtarzalna lub złożona. Nie komplikuj prostych par właściwość-wartość.
  • Używaj typów: upewnij się, że parametry i zwracane wartości są oczekiwanego typu.
  • Rozważ użycie wstępnie skompilowanych alternatyw: w przypadku funkcji, które nie zależą od danych wejściowych użytkownika, zapytań o media ani innych odmian po stronie klienta, rozważ użycie prekompilatora CSS, aby uniknąć niepotrzebnej pracy po stronie klienta.

Strategie zastępcze

W przeglądarkach, które nie obsługują funkcji CSS, wartości ustawione za pomocą funkcji CSS będą nieprawidłowe. Aby zapewnić obsługę innych przeglądarek, najpierw podaj wartość zastępczą właściwości. W przeglądarkach obsługujących funkcje CSS zostanie ona zastąpiona.

.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);
}

Jeśli musisz ograniczyć powtarzanie stylów, a jednocześnie obsługiwać inne przeglądarki, rozważ użycie prekompilatora CSS z funkcjami, takiego jak Sass.