Visual Studio Code CSS error "Do not use empty rulesets"

Question

I have been using Visual Studio Code for HTML and CSS. I get an error that does not impair the website, but I would like to know more about it. When I hover over the styling for an ID in HTML, a box pops up and says. "Do not use empty rulesets".

Can anyone provide more information on "empty rulesets" and explain why Visual Studio Code (or any other editor) would warn about an empty ruleset?

Answer 1

In CSS, a ruleset is one of the basic building blocks that make up a stylesheet:

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

An empty ruleset is one that doesn't have any property declarations, just a selector:

#id {
}

As you note, these rules don't have any effect on the rendering of a document, but some browsers will consume them when evaluating CSS only to find nothing there. Performance junkies detest any unnecessary overhead of this sort, so it's better to scrub them for the sake of cleanliness. In fact, CSS Lint has a rule specifically against empty rulesets, and Code is simply linting your CSS on-the-fly with the same set of rules.

However, empty rulesets can be useful in working around certain browser bugs such as this one. In such situations, removing the empty ruleset actually has adverse effects on page rendering, so they should be left there, ideally with a comment documenting their purpose.

You can disable linting by setting css.validate to false in your settings.json file. See the documentation for how to do this.