Un tooltip nel pannello Styles mostra la specificità calcolata: più velocità nel debug e meno ricorso a !important.
La specificità CSS è uno di quei temi che tutti conoscono… finché non ti trovi davanti a uno stile che “non passa” e inizi a contare ID, classi e tag come se stessi risolvendo un enigma.
Da Chrome 151 c’è una scorciatoia molto concreta: DevTools ti mostra automaticamente la specificità di un selettore direttamente nel pannello Styles, senza dover fare la matematica a mano.
La novità: tooltip con specificità nel pannello Styles
Quando sei in Elements → Styles, ti basta:
- individuare una regola CSS;
- passare il mouse sul selettore.
DevTools visualizza un tooltip con la specificità calcolata per quel selettore.
Non è un “giocattolo”: è un supporto immediato mentre stai facendo debug, soprattutto quando hai più regole in competizione tra loro (CSS legacy, utility class, componenti, override in cascata, ecc.).
Perché è utile (davvero) nel debug quotidiano
Quando uno stile non viene applicato, nella pratica i motivi ricorrenti sono:
- una regola successiva lo sovrascrive (ordine in cascata);
- una regola concorrente ha specificità più alta;
- stai perdendo contro un
!important.
Avere il valore di specificità sotto al cursore riduce drasticamente il tempo di diagnosi: capisci subito se il problema è “peso” del selettore o semplice ordine/struttura.
Meno !important, più selettori “tarati”
Il beneficio editoriale più importante è culturale: invece di reagire d’istinto con !important, puoi aggiustare il selettore con intenzione.
Esempi di strategie sane (a seconda del contesto):
- rendere il selettore leggermente più specifico, ma senza arrivare a catene fragili di discendenti;
- preferire classi mirate a ID (di solito più gestibili e riusabili);
- rivedere la struttura della cascata (layer, ordine dei fogli, scoping) se stai combattendo “troppo spesso” con l’override.
La specificità “visibile” aiuta a fare questa scelta in modo informato, evitando escalation inutili che poi rendono il CSS difficile da mantenere.
Sintesi
Con Chrome 151, DevTools aggiunge un dettaglio piccolo ma ad alto impatto: la specificità CSS calcolata on-hover nel pannello Styles. È una funzione che accelera il debug, rende più trasparenti i conflitti tra regole e spinge verso una pratica più pulita: risolvere con selettori ben calibrati, non con una pioggia di !important.
Se ti capita spesso di “perdere” una regola e non capire subito perché, questa è una di quelle feature che, una volta notata, diventa parte del flusso quotidiano.
Articolo originale: https://frontendfacile.it/blog/specificita-css-in-devtools-da-chrome-151-la-vedi-al-volo-e-smetti-di-fare-i-con
Top comments (0)