Riduci la ripetizione degli stili con le funzioni CSS

La gestione di fogli di stile di grandi dimensioni spesso porta a una logica ripetitiva, soprattutto quando si tratta di token del sistema di progettazione come gradienti o pattern di layout adattabili.

La regola at-rule CSS @function ti consente di incapsulare questa logica in funzioni riutilizzabili e parametrizzate, rendendo il tuo CSS più gestibile, coerente e DRY (Don't Repeat Yourself).

La sintassi @function

Una funzione personalizzata viene definita utilizzando la regola @function seguita da un nome con trattino e da un elenco di parametri. La funzione restituisce un valore utilizzando la proprietà result.

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

Concetti principali

• Parametri: devono iniziare con un doppio trattino (--).
• Valori predefiniti: puoi fornire valori predefiniti utilizzando i due punti (:).
• Risultato: la proprietà result determina il valore restituito dalla funzione. L'ultimo result dichiarato nel corpo della funzione ha la precedenza.
• Ambito: i parametri e le variabili definiti all'interno della funzione hanno un ambito locale.
• Tipi: puoi richiedere che i parametri e il valore restituito corrispondano a un tipo CSS con notazione tra parentesi (ad es. <color>) e consentire più tipi con la funzione type (ad es. type(<number> | <percentage>)).

Esempi pratici

1. Token del sistema di progettazione (gradienti)

Garantisci mappe a gradiente di colore coerenti nella tua app incapsulando la logica dei gradienti. --angle fornisce un valore predefinito per garantire la coerenza, che può essere sostituito.

@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 di layout condizionale

Puoi utilizzare @media o altre query direttamente all'interno di una funzione per restituire valori diversi in base all'ambiente. Quando utilizzi la logica condizionale in una funzione, tieni presente che @function non "restituisce" il primo valore di result, ma segue la struttura CSS a cascata e si risolve nell'ultimo valore corrispondente in base alle dimensioni dello schermo, del contenitore o di un'altra 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);
}

Best practice

• Utilizza nomi con trattini: aggiungi sempre il prefisso -- ai nomi e ai parametri delle funzioni.
• Fornisci valori predefiniti: rendi le tue funzioni più solide fornendo valori predefiniti ragionevoli.
• Scegli la semplicità: utilizza le funzioni per la logica effettivamente ripetuta o complessa. Non complicare eccessivamente le semplici coppie proprietà-valore.
• Utilizza i tipi: assicurati che i parametri e i valori restituiti siano dei tipi previsti.
• Valuta l'utilizzo di alternative precompilate: per le funzioni che non dipendono dall'input dell'utente, dalle query supporti o da altre varianti lato client, valuta l'utilizzo di un precompilatore CSS per evitare di eseguire operazioni non necessarie sul client.

Strategie di riserva

Nei browser che non supportano le funzioni CSS, i valori impostati utilizzando le funzioni CSS non saranno validi. Per supportare altri browser, fornisci prima un valore di riserva per la proprietà. Questo valore verrà sostituito nei browser che supportano la funzione CSS.

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

Se è necessario ridurre la ripetizione degli stili supportando al contempo altri browser, prendi in considerazione un precompilatore CSS con funzioni, come Sass.