Codice CSS di Visual Studio Errore "Non utilizzare set di regole vuoti"

Question

Utilizzo codice di Visual Studio per HTML e CSS. Ottengo un errore che non pregiudica il sito Web, ma mi piacerebbe saperne di più. Quando passo il mouse sullo stile di un ID in HTML, viene visualizzata una finestra che dice. "Non usare set di regole vuoti".

Qualcuno può fornire ulteriori informazioni su "set di regole vuoti" e spiegare perché Visual Studio Code (o qualsiasi altro editor) avviserà di un set di regole vuoto?

Answer 1

In CSS, un ruleset è uno degli elementi di base che compongono un foglio di stile:

.example { 
    font-size: 1.25rem; 
    color: red; 
} 

Un set di regole vuoto è uno che non ha alcuna dichiarazioni di proprietà, solo un selettore:

#id { 
} 

Come si nota, queste regole non hanno alcun effetto sul rendering di un documento, ma some browsers will consume them quando si valuta il CSS solo per non trovare nulla lì. I drogati di prestazioni detestano qualsiasi overhead non necessario di questo tipo, quindi è meglio scrub loro per motivi di pulizia. In effetti, CSS Lint ha una regola specifica contro i set di regole vuoti, e Code sta semplicemente lintando il tuo CSS al volo con lo stesso insieme di regole.

Tuttavia, i set di regole vuoti possono essere utili per aggirare certi bug del browser come this one. In tali situazioni, la rimozione del set di regole vuoto ha effettivamente effetti negativi sul rendering della pagina, quindi dovrebbero essere lasciati lì, idealmente con un commento che ne documenta lo scopo.

È possibile disabilitare il linting impostando css.validate su falso nel file settings.json. Vedi il documentation per come farlo.