Nuovo selettore CSS per selezionare classi con prefisso

Il CSS sta per ricevere un importante aggiornamento che potrebbe semplificare notevolmente la gestione delle classi con prefisso. Il nuovo selettore Class Prefix Selector permetterà di selezionare più classi che condividono un prefisso comune, evitando l’uso di attributi o classi aggiuntive. Questa funzionalità, ancora in fase di sviluppo, è stata approvata recentemente dal CSS Working Group durante una riunione a Berlino il 20 agosto 2026. Il selettore, che si presenta come .btn-*, permette di applicare stili a tutte le classi che iniziano con un prefisso specifico, come .btn-primary, .btn-secondary e .btn-danger, senza dover elencarle singolarmente o introdurre classi base aggiuntive.

Un’idea nata nel 2024

Il concetto del selettore Class Prefix Selector è stato originariamente proposto da Lea Verou nel 2024, come indicato nel draft del CSSWG (w3c/csswg-drafts/#10001). L’idea si basa sulla necessità di semplificare la scrittura del CSS, soprattutto per i progetti che utilizzano utility class o sistemi di design. Il selettore, che si presenta in forma semplice come .btn-*, permette di applicare stili a gruppi di classi con un prefisso comune, riducendo la ripetizione e migliorando la manutenibilità del codice.

Limitazioni e considerazioni di performance

Nonostante l’innovazione sia promettente, il selettore presenta alcune limitazioni. Ad esempio, non è previsto l’uso di caratteri diversi dal trattino, come il carattere underscore, almeno per il momento. Inoltre, non è consentito l’uso di wildcard arbitrarie, come .foo*, per motivi di performance e per evitare selezioni impreviste. I browser, infatti, utilizzano bucket per le classi per velocizzare la selezione, e l’introduzione di wildcard potrebbe compromettere questa ottimizzazione. Inoltre, il selettore non permette di selezionare classi vuote o con trattini aggiuntivi, come .foo-, per evitare selezioni non intenzionali.

Il selettore è attualmente in fase di sviluppo e potrebbe subire modifiche prima di essere implementato nei browser. Al momento, non esiste alcun supporto per i principali browser, tra cui Chrome, Firefox e Safari. Il progetto è in corso di sperimentazione e richiede ulteriori test e ottimizzazioni prima di poter essere utilizzato in produzione. Per verificare se un browser supporta il selettore Class Prefix Selector, è possibile utilizzare una regola @supports standard. Ad esempio: @supports selector(.foo-*) { /* Browser has support */ }. Inoltre, esiste un test su CodePen che permette di verificare il supporto del selettore in tempo reale. Il progetto è stato pubblicato da Bramus, un frontend developer belga che lavora come Chrome Developer Relations Engineer presso Google.

Il selettore rappresenta un passo avanti per la semplificazione del CSS, soprattutto per i progetti che utilizzano utility class e sistemi di design. Tuttavia, la sua implementazione richiederà tempo e ulteriori ottimizzazioni per garantire un supporto stabile e performante nei browser. Per ora, il selettore è un’idea promettente che potrebbe rivoluzionare la gestione delle classi con prefisso nel futuro.

—