Nuovo selettore CSS per selezionare classi con prefisso
Nuovo selettore CSS per selezionare classi con prefisso, miglioramento per utility e design system
Il CSS sta per ricevere un importante aggiornamento che semplificherà la selezione di classi con prefissi comuni. Il nuovo selettore, chiamato Class Prefix Selector, permetterà di targettare più classi con lo stesso prefisso senza dover elencarle singolarmente o utilizzare metodi fragili come gli attributi. Questa funzionalità, ancora in fase di sviluppo, è stata approvata recentemente dal CSS Working Group durante un incontro a Berlino il 20 agosto 2026. Il selettore, con sintassi semplice come .btn-*, potrebbe rivoluzionare l’uso delle utility class e dei sistemi di design.
Un problema comune nella progettazione CSS
Finora, per applicare uno stile a più classi con lo stesso prefisso, gli sviluppatori dovevano ricorrere a metodi non ottimali. Ad esempio, si poteva usare un attributo come [class^="btn-"] o aggiungere una classe base come .btn a ogni elemento. Questi approcci, sebbene funzionanti, presentavano limitazioni: i selettori attributi erano fragili e difficili da mantenere, mentre l’aggiunta di classi base aumentava la complessità del markup. Il nuovo selettore risolve questi problemi in modo diretto e semplice.
La soluzione: il selettore di prefisso
Il selettore .btn-* permette di applicare uno stile a tutte le classi che iniziano con btn-, come .btn-primary, .btn-secondary o .btn-danger. La sintassi è intuitiva e riduce la necessità di ripetere codice. Inoltre, il selettore è stato progettato per evitare errori di selezione accidentale, ad esempio evitando che .btn* selezioni anche classi come .footer o .btn-. Questo è cruciale per la performance e la stabilità del codice. Il selettore è stato inizialmente proposto da Lea Verou nel 2024 e approvato recentemente dal CSS Working Group. Tuttavia, la specifica potrebbe ancora subire modifiche prima che venga implementata nei browser. Al momento, il supporto è limitato e non esiste alcuna implementazione attiva. Gli sviluppatori possono comunque iniziare a testare il selettore utilizzando regole @supports per verificare la compatibilità.
Limitazioni e futuri sviluppi
Il selettore attualmente supporta solo prefissi separati da trattini, come btn-, e non permette l’uso di caratteri come * o _. Questo è dovuto a motivi di performance e sicurezza: l’uso di caratteri arbitari potrebbe causare selezioni impreviste e ridurre l’efficienza dei motori di rendering. Inoltre, i prefissi non possono essere vuoti, e non è previsto che .foo-* selezioni .foo- o .foo--. Queste limitazioni sono state discusse durante le riunioni del CSS Working Group e potrebbero essere modificate in futuro.
Il nuovo selettore rappresenta un passo avanti per la progettazione CSS, specialmente per i sistemi di design e le utility class. Tuttavia, il suo utilizzo in produzione è ancora lontano, e gli sviluppatori dovranno attendere l’implementazione nei browser. Per rimanere aggiornati, è possibile seguire i progressi sulle issue aperte nei browser o utilizzare strumenti come CodePen per testare le funzionalità in anteprima.