2015-09-08 1 views
8

J'ai utilisé Visual Studio Code pour HTML et CSS. J'obtiens une erreur qui ne nuit pas au site Web, mais j'aimerais en savoir plus à ce sujet. Lorsque je survole le style pour un ID en HTML, une boîte apparaît et dit. "N'utilisez pas de jeux de règles vides".Erreur CSS Visual Studio Code "Ne pas utiliser les jeux de règles vides"

Quelqu'un peut-il fournir plus d'informations sur les "jeux de règles vides" et expliquer pourquoi Visual Studio Code (ou tout autre éditeur) avertirait d'un jeu de règles vide?

+2

Demandez-vous ce que ce message signifie, ou pourquoi le code semble ne pas aimer les jeux de règles vides? – BoltClock

Répondre

17

En CSS, un ruleset est l'un des éléments de base qui composent une feuille de style:

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

Un ruleset vide est celui qui n'a pas de déclarations de propriété, juste un sélecteur:

#id { 
} 

Comme vous le constatez, ces règles n'ont aucun effet sur le rendu d'un document, mais some browsers will consume them lors de l'évaluation de CSS uniquement pour y trouver rien. Junkies de performance détestent frais généraux inutiles de ce genre, il est donc préférable de les frotter pour des raisons de propreté. En fait, CSS Lint a une règle spécifiquement contre les jeux de règles vides, et Code est simplement en train de lisser votre CSS à la volée avec le même ensemble de règles. Toutefois, les jeux de règles vides peuvent être utiles pour contourner certains bogues de navigateur, tels que this one. Dans de telles situations, la suppression de l'ensemble de règles vide a en réalité des effets négatifs sur le rendu de la page, ils doivent donc être laissés là, idéalement avec un commentaire documentant leur objectif.

Vous pouvez désactiver le filtrage en définissant css.validate sur false dans votre fichier settings.json. Voir le documentation pour savoir comment faire.

+2

Vous pouvez également utiliser '" css.lint.emptyRules ":" ignorer ",' dans vos paramètres utilisateur, si vous voulez une lissage CSS mais trouvez la ligne rouge sous les jeux de règles CSS vides. (Beaucoup d'autres personnalisables est possible: il suffit de chercher "css.lint") –