VS Code: Do not use empty rulesets CSS error [Solved]

# VS Code: Do not use empty rulesets CSS error [Solved]

The VS Code "Do not use empty rulesets" CSS warning is shown when you have an empty ruleset in a .css file.

To resolve the issue, either specify CSS properties and values or disable the warning in VS Code.

vscode do not use empty rulesets css

Here is an example of when the warning is shown.

style.css

Copied!
/* Do not use empty rulesetscss(emptyRules) */
#box {
}

/* Do not use empty rulesetscss(emptyRules) */
body {
}

We haven't specified any CSS properties and values in the ruleset, so VS Code assumes that we've forgotten and shows the warning.

Some browsers, still try to read empty rulesets which might slow down the rendering of your application.

One way to get around this is to:

Remove the ruleset.
Or specify CSS properties and values in the ruleset.

style.css

Copied!
#box {
  background-color: lime;
  padding: 10px 20px;
}

body {
  padding: 50px 100px;
  background-color: lightgray;
}

The warning is no longer shown because the rulesets are not empty.

specify properties in css ruleset

# Disable the "Do not use empty rulesets" setting in VS Code

If you need to disable the "Do not use empty rulesets" VS Code linting rule:

Press Ctrl + Shift + P (or Command + Shift + P on macOS).

Note: you can also press F1 to open the Command Palette.

Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

Type css.lint.empty and press Enter.
Set the CSS Lint: Empty Rules and SCSS Lint: Empty Rules settings to ignore.

disable css lint empty rules vscode

Now you will no longer get linting warnings for empty CSS rulesets.

For example, the following code doesn't show any warnings after making the change.

style.css

Copied!
#box {
}

body {
}

no warnings shown for empty ruleset

# Disable the "Do not use empty rulesets" linting rule in your `settings.json` file

You can also disable the "Do not use empty rulesets" linting rule directly in your settings.json file in VS Code.

Press Ctrl + Shift + P (or Command + Shift + P on macOS).

Note: you can also press F1 to open the Command Palette.

Type user settings json.
Click on Preferences: Open User Settings (JSON)

preferences open user settings

Set the following properties in your settings.json file.

settings.json

Copied!
"css.lint.emptyRules": "ignore",
"scss.lint.emptyRules": "ignore"

You will be able to use empty rulesets in your CSS code after making the change.

# Disable the "Do not use empty rulesets" linting rule for the current project

If you only want to disable the "Do not use empty rulesets" linting rule for the current project:

In the root directory of your project, create a .vscode folder.
Create a settings.json file in the .vscode folder.
Add the following code to your settings.json file.

.vscode/settings.json

Copied!
{
  "css.lint.emptyRules": "ignore",
  "scss.lint.emptyRules": "ignore"
}

Note that the settings you've specified in your local .vscode/settings.json file are only applied to the current project and override global configuration.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

VS Code: Do not use empty rulesets CSS error [Solved]