Usare data-* con i selettori di attributo CSS

I selettori CSS degli attributi selezionano gli elementi in base alla presenza e al valore degli attributi: [data-state] corrisponde a qualsiasi elemento con un attributo data-state; [data-state="active"] corrisponde solo quando il valore è uguale a "active".

[data-tooltip] corrisponde agli elementi che hanno l'attributo data-tooltip, indipendentemente dal valore. Lo utilizzi per applicare gli stili di base del tooltip a qualsiasi elemento a cui siano associati dati del tooltip, prima di considerare il contenuto del tooltip.

[data-theme="dark"] corrisponde solo agli elementi in cui data-theme è esattamente uguale a "dark". Questo consente di applicare stili basati sul tema: applichi i token di colore scuro quando l'elemento html ha data-theme="dark" impostato da JavaScript.

[data-icon^="arrow"] corrisponde ai valori che iniziano con "arrow". [data-label$="ing"] corrisponde ai valori che terminano con "ing". [data-tag*="feature"] corrisponde ai valori che contengono "feature". Questi selettori consentono di applicare stili basati su pattern senza aggiungere molte classi.

Modelli lo stato del componente con attributi data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. Le regole CSS per ogni stato sostituiscono più nomi di classe condizionali, mantenendo lo stato in un unico attributo e gli stili chiaramente separati.

I selettori degli attributi hanno la stessa specificità dei selettori di classe (0,1,0). Combinandoli con i selettori di elementi: button[data-variant="primary"] ha specificità (0,1,1). Pianifichi la specificità dei selettori degli attributi insieme alle regole basate sulle classi per evitare conflitti.

Un tooltip realizzato interamente in CSS utilizzando data-tooltip: applichi ::after { content: attr(data-tooltip) } al passaggio del mouse. La funzione content: attr() legge il valore dell'attributo e lo utilizza come contenuto dello pseudo-elemento — non sono necessari JavaScript né elementi HTML aggiuntivi.

Utilizzi le classi per indicare l'intento dello stile (is-active, has-error) e gli attributi data per il payload dei dati (data-user-id, data-count). Quando lo stesso attributo controlla sia il comportamento (lo legge JS) sia lo stile (CSS lo usa per la selezione), data-* evita duplicazioni tra JS e CSS.

Concateni più selettori degli attributi: [data-type="button"][data-size="large"] corrisponde agli elementi in cui sono impostati entrambi gli attributi. In questo modo ottiene una corrispondenza composta senza dover utilizzare una classe combinata come .button-large, riducendo la proliferazione delle classi.

I selettori degli attributi sono leggermente più lenti dei selettori di classe durante la risoluzione degli stili. Per gli stili statici, preferisca le classi. Utilizzi i selettori degli attributi quando il valore dell'attributo determina lo stile (come data-state o data-theme) e cambia durante l'esecuzione, poiché un solo attributo sostituisce più classi attivate e disattivate.

Per impostazione predefinita, la corrispondenza dei valori degli attributi è sensibile alle maiuscole e alle minuscole in HTML (ma non per i codici lingua in XHTML). Aggiunga il flag i per una corrispondenza non sensibile alle maiuscole: [data-state="Active" i] corrisponde a "active", "Active" e "ACTIVE".

Che cosa fa il selettore CSS [data-state="loading"] .spinner?

I selettori CSS degli attributi corrispondono agli attributi data-* in base alla presenza, al valore esatto o a pattern parziali. In combinazione con content: attr() per i tooltip e data-state per le macchine a stati dei componenti, gli attributi data-* fungono sia da contenitori di dati sia da punti di aggancio per gli stili CSS, senza proliferazione delle classi.