Padroneggia le classi in Webflow: combo, global e oltre

Alla fine di questa lezione capirai come funzionano davvero le classi in Webflow — non solo cosa sono, ma cosa succede sotto il cofano quando ne rinomini una, la duplichi, aggiungi una combo o tiri fuori una global class. Metti a posto questo e tutto lo styling in Webflow diventa più calmo e prevedibile.

Le classi sono le fondamenta dello styling in Webflow: ogni colore, ogni font-size, ogni pezzo di spacing è legato a una classe. Il concetto sembra semplice finché non inizi a rinominare e impilare le cose — è lì che entrano confusione (e qualche mito duro a morire). Quindi mettiamo ordine, una volta per tutte.

Il modello mentale a cui torno sempre: immagina ogni elemento della pagina come una persona, e una classe come un vestito che hai disegnato tu. Il vestito è riutilizzabile — puoi metterlo su dieci elementi o cento — e da quella base puoi rinominarlo, clonarlo o aggiungere accessori. Tutto il resto qui è solo una variazione di questa unica idea.

Come funziona

Una classe è un’etichetta che dai a uno o più elementi per collegarli a un set di regole di stile CSS. Dice “ogni elemento che indossa questa deve avere questo aspetto”. Ecco perché è riutilizzabile: disegni il vestito una volta, lo metti su quanti elementi vuoi e cambiando il design in un punto li aggiorni tutti.

Rinominare è l’operazione più delicata. Clicca la freccetta accanto al nome della classe nel pannello Style (o premi Cmd/Ctrl + Shift + Enter) e scrivi un nome nuovo. Stai rietichettando il modello, non ristilizzando una singola maglietta — quindi rinominare hero-section in main-hero aggiorna automaticamente ogni elemento che la usava, senza alcun cambiamento di design.

Duplicare serve quando vuoi qualcosa di simile ma indipendente. Diciamo che hai una card verticale e ne vuoi una orizzontale che mantenga padding, radius e ombra ma cambi layout e sfondo. Duplica la classe: Webflow copia ogni stile in una classe nuova di zecca e del tutto staccata — la modifichi come vuoi e l’originale non si muove.

Le combo class sono quelle sottili. Una combo non è una classe nuova; è una variazione sovrapposta a una classe base (clicca subito dopo il nome della classe, o Cmd/Ctrl + Enter). Pensala come un accessorio — una sciarpa su un completo — o come una sartoria che sovrascrive la base, tipo is-secondary che rende trasparente un bottone. Il punto: una combo è salvata come stile unico legato alla sua base, quindi non la puoi usare altrove. E due combo con lo stesso nome (has-border su una card e has-border su una section) sembrano identiche ma sono entità del tutto separate — cambiarne una non tocca l’altra.

Le global class risolvono esattamente questo. Una global è una classe che puoi mettere su qualsiasi elemento, sopra qualsiasi altra classe — di solito la crei nella style guide, la nomini con un prefisso g- o u- e le dai una sola proprietà (g-radius-8, u-bg-red). Tecnicamente è identica a una classe normale; l’unica differenza è l’intento — una classe normale definisce un vestito intero, una global controlla un piccolo accessorio. Ma ecco l’insidia: nel momento in cui aggiungi una global a un elemento che ha già una classe e la modifichi lì, Webflow trasforma silenziosamente la coppia in combo (card g-radius-8). La modifica resta locale a quell’elemento e la global sottostante resta pulita e riutilizzabile — che è proprio ciò che vuoi, a patto di sapere che sta succedendo.

Infine, cosa succede in pubblicazione. Webflow ripulisce i nomi delle classi perché siano CSS valido e sicuro: maiuscole → minuscole, spazi → trattini, un numero iniziale prende un underscore, un trattino iniziale viene ignorato ed emoji e caratteri speciali vengono rimossi. Ci penserai raramente — finché non scrivi uno snippet CSS o JavaScript e devi targettare il nome reale della classe pubblicata.

Come si usa

1. Rinomina — clicca la freccetta accanto al nome della classe (o Cmd/Ctrl + Shift + Enter) e scrivine uno nuovo. Ogni elemento che la usa si aggiorna; il design non cambia.
2. Duplica — freccetta → Duplicate class quando vuoi una variante simile ma separata (la card orizzontale da una verticale). Modifichi liberamente; l’originale resta intatto.
3. Aggiungi una combo — clicca subito dopo il nome della classe (o Cmd/Ctrl + Enter) e aggiungi una variazione come is-secondary o has-border. Si sovrappone e può sovrascrivere la base, ma è legata a quella classe base.
4. Crea una global class — nella style guide, metti un div block, nominalo con un prefisso g- / u- e dagli una singola proprietà (es. g-radius-8). Ora puoi aggiungerla a qualsiasi cosa.
5. Tieni pulite le global — ricorda che modificare una global su un elemento che ha già una classe la trasforma in combo, quindi la modifica resta locale. Se vuoi che valga ovunque, modifica la global class isolata.
6. Sii coerente coi nomi — scegli una convenzione e mantienila. Webflow sistemerà i nomi in pubblicazione, quindi tienili semplici se pensi di targettarli con codice custom più avanti.

Quando usi le classi in modo consapevole — rinominare per rietichettare, duplicare per ramificare, combo per variazioni veloci, global per accessori riutilizzabili — i tuoi progetti diventano più puliti, veloci e prevedibili. Ogni modifica in Webflow parte da una classe: più le capisci, più controllo hai.