Stijlherhaling verminderen met CSS-functies

Het onderhouden van grote stylesheets leidt vaak tot herhalende logica, vooral als je werkt met ontwerpsysteemtokens zoals kleurverlopen of responsieve vormgevingspatronen.

Met de CSS-at-regel @function kun je deze logica inkapselen in herbruikbare, geparametriseerde functies, waardoor je CSS beter te onderhouden, consistenter en DRY (Don't Repeat Yourself) wordt.

De syntaxis @function

Een aangepaste functie wordt gedefinieerd met de regel @function, gevolgd door een naam met een streepje en een lijst met parameters. De functie retourneert een waarde met de property result.

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

Belangrijkste concepten

• Parameters: Moeten beginnen met een dubbel streepje (--).
• Standaardwaarden: Je kunt standaardwaarden invoeren met een dubbele punt (:).
• Resultaat: De property result bepaalt de waarde die de functie retourneert. De laatste result die in de hoofdtekst van de functie is gedefinieerd, wint.
• Bereik: Parameters en variabelen die in de functie zijn gedefinieerd, hebben een lokaal bereik.
• Typen: Je kunt vereisen dat parameters en de geretourneerde waarde overeenkomen met een CSS-type met haakjesnotatie (bijv. <color>) en meerdere typen toestaan met de functie type (bijv. type(<number> | <percentage>)).

Praktische voorbeelden

1. Tokens voor ontwerpsysteem (kleurovergangen)

Zorg voor consistente kleurovergangen in je app door de logica voor overgangen in te kapselen. De --angle biedt een standaardwaarde voor consistentie die kan worden overschreven.

@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. Logica voor voorwaardelijke indeling

Je kunt @media of andere query's rechtstreeks in een functie gebruiken om verschillende waarden te retourneren op basis van de omgeving. Als je voorwaardelijke logica gebruikt in een functie, onthoud dan dat de @function niet 'terugkeert' bij de eerste waarde van result, maar de CSS-cascade volgt en wordt omgezet in de laatste waarde die overeenkomt op basis van de schermgrootte, containergrootte of andere query.

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

Praktische tips

• Namen met streepjes gebruiken: Laat je functienamen en parameters altijd beginnen met --.
• Standaardwaarden bieden: Maak je functies robuuster door verstandige standaardwaarden te bieden.
• Houd het simpel: Gebruik functies voor logica die herhaald of complex is. Maak eenvoudige eigenschap-waardeparen niet te ingewikkeld.
• Gebruik typen: Zorg dat je parameters en retourwaarden de verwachte typen zijn.
• Overweeg vooraf gecompileerde alternatieven: Voor functies die niet afhankelijk zijn van gebruikersinvoer, mediaquery's of andere variaties aan de clientzijde, kun je overwegen een CSS-precompiler te gebruiken om onnodig werk aan de clientzijde te voorkomen.

Reservestrategieën

In browsers die geen CSS-functies ondersteunen, zijn waarden die zijn ingesteld met CSS-functies ongeldig. Als je andere browsers wilt ondersteunen, geef je eerst een reservewaarde voor de property op. Dit wordt overschreven in browsers met ondersteuning voor css-functies.

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

Als het een vereiste is om herhaling van stijlen te verminderen terwijl je andere browsers ondersteunt, kun je een CSS-precompiler met functies overwegen, zoals Sass.