Ordinare i selettori CSS per specificità

Questo strumento riceve singoli selettori CSS, ne convalida la sintassi, calcola per ciascuno il valore di specificità in tre parti e restituisce l’intero elenco in ordine crescente. Riconosce le moderne pseudo-classi funzionali come :is(), :not(), :has(), :where() e :nth-child() e, quando due selettori hanno lo stesso peso, ne conserva l’ordine originale.

Come leggere il punteggio di specificità in tre parti

Ogni risultato segue la consueta struttura ID, classi e tipi. Il primo numero conta i selettori ID come <code>#checkout</code>. Il secondo conta classi, selettori di attributo e pseudo-classi come <code>.active</code>, <code>[disabled]</code> e <code>:hover</code>. Il terzo conta selettori di tipo e pseudo-elementi come <code>button</code> e <code>::before</code>. I selettori universali e i combinatori non aggiungono punti. Il confronto è lessicografico: un solo ID supera qualsiasi quantità di voci nelle altre colonne, mentre una classe supera qualsiasi quantità di selettori di tipo quando il numero di ID coincide. L’array <code>specificity</code> è comodo per il software, mentre <code>specificity_text</code> mostra lo stesso valore in forma compatta e leggibile. I risultati sono ordinati in modo crescente: le regole più riutilizzabili appaiono per prime e i selettori più difficili da sovrascrivere per ultimi. Se due punteggi coincidono esattamente, lo strumento mantiene l’ordine di inserimento invece di introdurre un criterio alfabetico secondario. Questo comportamento stabile rende prevedibili le esecuzioni ripetute e conserva il contesto utile del foglio di stile o della lista di revisione.

Gestire correttamente le pseudo-classi moderne

Le pseudo-classi funzionali sono il punto in cui i calcoli manuali sbagliano più spesso. <code>:where()</code> contribuisce sempre con specificità zero, compresi i selettori al suo interno: Lei può quindi precisare la struttura senza rendere più difficile sovrascrivere una regola. Al contrario, <code>:is()</code>, <code>:not()</code> e <code>:has()</code> assumono la specificità dell’argomento più specifico, senza aggiungere un proprio punto di pseudo-classe. Le forme <code>:nth-child()</code> e <code>:nth-last-child()</code> aggiungono un punto di pseudo-classe più la specificità più alta di un eventuale elenco introdotto da <code>of</code>. Sono considerate anche forme dello shadow tree come <code>:host()</code> e <code>::slotted()</code>. Il parser attraversa parentesi annidate, parentesi quadre, stringhe tra virgolette ed escape, perciò non confonde le virgole interne a una funzione con quelle che separano selettori al livello principale. Fornisca ciascun elemento come singolo selettore. Una virgola al livello principale rappresenterebbe più selettori con punteggi potenzialmente diversi e viene quindi rifiutata, anziché ridotta a un unico valore fuorviante. Questa regola mantiene una corrispondenza esatta tra ogni input e un solo punteggio di output.

Semplificare la cascata con l’elenco ordinato

Un rapporto sulla specificità è più utile come guida al refactoring che come invito a creare selettori più forti. Incolli selettori rappresentativi di un componente, di un design system o di un foglio di stile legacy ed esamini la parte alta dei risultati. I grandi salti rivelano spesso ID, stati eccessivamente qualificati o un argomento potente nascosto in <code>:is()</code> o <code>:not()</code>. Questi selettori possono costringere il codice successivo a ripetere dettagli strutturali solo per sovrascrivere una dichiarazione. Valuti di sostituirli con una classe a scopo unico, alleggerire il contesto facoltativo con <code>:where()</code> oppure organizzare i layer affinché la precedenza non dipenda da punteggi crescenti. Anche la parte bassa è utile: regole sugli elementi e utility leggere sono più facili da riutilizzare quando il loro ruolo è chiaro. I processi automatici possono chiamare l’API a $0.002 per segnalare nuovi selettori oltre la soglia scelta dal team, registrare la specificità insieme al CSS generato o presentare diagnostica ordinata durante la revisione. Un input non valido fa fallire l’intera richiesta, così un rapporto parziale non nasconde mai un selettore malformato. Il calcolo è deterministico e non richiede la rete: a input uguali corrispondono sempre gli stessi valori e lo stesso ordine.