Ошибка CSS кода Visual Studio Не используйте пустые наборы правил

Я использую Visual Studio Code для HTML и CSS. Я получаю сообщение об ошибке, которое не влияет на работу веб-сайта, но я хотел бы узнать об этом больше. При наведении курсора на стиль для идентификатора в HTML всплывает окно с надписью. «Не используйте пустые наборы правил».

Может ли кто-нибудь предоставить дополнительную информацию о «пустых наборах правил» и объяснить, почему Visual Studio Code (или любой другой редактор) предупреждает о пустом наборе правил?


person Wyredain    schedule 08.09.2015    source источник
comment
Вы спрашиваете, что означает это сообщение или почему Code, похоже, не любит пустые наборы правил?   -  person BoltClock    schedule 08.09.2015


Ответы (1)


В CSS набор правил является одним из основных строительных блоков, которые составить таблицу стилей:

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

Пустой набор правил - это тот, в котором нет объявлений свойств, только селектор:

#id {
}

Как вы заметили, эти правила не влияют на рендеринг документа, но некоторые браузеры будут использовать их при оценке CSS, но ничего там не найдут. Любители производительности ненавидят любые ненужные накладные расходы такого рода, поэтому ради чистоты лучше их вычистить. Фактически, CSS Lint имеет правило, направленное против пустых наборов правил, а Code просто выполняет линкование вашего CSS на лету с тем же набором правил.

Однако пустые наборы правил могут быть полезны при работе с некоторыми ошибками браузера, такими как этот. В таких ситуациях удаление пустого набора правил на самом деле оказывает неблагоприятное воздействие на рендеринг страницы, поэтому их следует оставить там, в идеале с комментарием, документирующим их назначение.

Вы можете отключить линтинг, установив для css.validate значение false в файле settings.json. См. документацию, чтобы узнать, как это сделать.

person BoltClock    schedule 08.09.2015
comment
Вы также можете использовать "css.lint.emptyRules": "ignore", в своих пользовательских настройках, если вы хотите использовать CSS-линтинг, но обнаружите, что красная линия под пустыми наборами правил CSS отвлекает. (Возможно множество других настроек: просто найдите css.lint) - person Darren Cook; 13.02.2017
comment
Или "less.lint.emptyRules": "ignore", или "scss.lint.emptyRules": "ignore", для меньшего и дерзкого соответственно. Я думаю, что эти препроцессоры все равно удаляют пустые наборы правил ... - person James Bradford; 20.10.2018
comment
Чтобы ПОЛНОСТЬЮ избежать появления такого рода предупреждающих сообщений, я поместил следующие определения в Настройки: css.lint.emptyRules: ignore, less.lint.emptyRules: ignore, scss.lint.emptyRules: ignore. Это сделано для того, чтобы охватить все типы файлов и форматов CSS. - person TheCuBeMan; 07.02.2019
comment
Если кому-то еще интересно, почему они возвращаются в файлах vue, даже если все эти три параметра игнорируют, это ошибка в расширении vetur: github.com/vuejs/vetur/issues/1037 "vetur.validation.style": false - это трудный обходной путь. - person Darren Cook; 07.10.2019