Do not use empty rulesets как исправить

Do not use empty rulesets как исправить

Last updated: May 3, 2023
Reading time · 3 min

# 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.

Here is an example of when the warning is shown.

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:

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

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.

# 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:

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

Visual Studio Code CSS error «Do not use empty rulesets»

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?

28.2k 8 8 gold badges 35 35 silver badges 59 59 bronze badges
asked Sep 8, 2015 at 17:49
511 1 1 gold badge 4 4 silver badges 7 7 bronze badges
Are you asking what that message means, or why Code seems to dislike empty rulesets?
Sep 8, 2015 at 17:53

1 Answer 1

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

.example

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

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.

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncorrect warning «Do not use empty rulesets» #18

Подчёркивает сектор scss, ка убрать?

Если что я новичок, могу что-то говорить не правильно.
Как убрать подсевку ошибки селектора в scss файлах? В простом css такого подчёркивания нет.
P.S В настройках SCSS Lint: Empty Rules поставил ignore, да с пустых блоков убралось подчёркивание, а вот недописанных селекторов нет, это очень раздражает почему-то.

spoiler

• Вопрос задан более трёх лет назад
• 829 просмотров

1 комментарий

Простой 1 комментарий

А можно узнать зачем? Он всё верно подчёркивает и избавляться от помощника, чтобы потом допускать глупые, ошибки выглядит как-то странно.

Решения вопроса 0
Ответы на вопрос 1

Это не ошибка селектора, а ошибка синтаксиса. Если ее не убрать, то компиляция SCSS в CSS будет невозможна!
В данном случае, линтер указывает вам, что селектор без содержимого оставлять нельзя!
Добавьте после селектора фигурные скобки и ошибка исчезнет.

Ответ написан более трёх лет назад

Влад @onndes Автор вопроса
Я это всё понимаю, но меня это очень сильно раздражает, при каждом новом вводе мигает ошибка, бесит

По опыту могу сказать, что подсветка ошибок раздражает только пока серьезно не помогла в решении проблемы. Для SASS это особенно актуально.

Когда код разрастется, подобная ошибка может полностью парализовать работу.
А, линтер поможет ее быстро найти. Без него это будет сделать гораздо труднее.

Чтобы отключить линтер, просто смените тип подсветки на обычный текст.
Подсветка кода не работает, зато и подсветки ошибок тоже нет.

ЗЫ. А ведь когда-то приходилось писать код в простом блокноте. И, что удивительно, никто не жаловался!