vscodeのエラー「Do not use empty rulesets」の意味は?

この記事はPRを含むよ〜!

do not use empty ruleset

モナリザの画像

VS codeで出てきた謎エラー「Do not use empty rulesets」
これは一体なんなの?




宣言ブロックが空の時に出現

cssを書いていこうとした矢先に謎のエラーが出現。

vscodeのエラー

まだ何も書いてないのにエラーなわけねーだろと思いつつ波線にカーソルを当てて見ると、

「Do not use empty rulesets」と表示されます。

これはどういうことかと言うと、空の宣言ブロックを使うなというエラーです。
直訳すると「空のrulesetを使うな」ですね。rulesetについては後述します。

気にしなくてOK

セレクタ(宣言を適用する対象のこと)だけ書いて中身は後で書きたい、というのはよくあることだと思います。

このエラーは宣言の適用忘れを見つけるには大変ありがたい機能ですが、何も間違ってないのに何個もエラー出されるとなんだかモヤモヤしますね。

基本、「Do not use empty rulesets」のエラーは自覚があるなら気にしなくて大丈夫です。慣れないうちはうんざりしますがそのうち気にならなくなります。

rulesetについて

最後にrulesetについてサクッと説明しておきます。

CSSの基本的な書き方は.box{background-color : skyblue ; }のような形ですね。

.boxがセレクターで、後に記述するコードの対象を表します。

中身を含めた{}、つまり{background-color : skyblue ; }の部分を宣言ブロックといい、{}の中身、今回の例でいうと background-color : skyblue ; の部分を宣言といいます。

「宣言」はいったい何を宣言しているのかというと、「どのスタイルを」「どう指定するか」を示しているわけです。「どのスタイルを」をプロパティ、「どう指定するか」を値と呼びます。

例でいうとbackground-colorがプロパティ、skyblueが値です。

今回登場したrulesetというのは、セレクターと宣言ブロック、つまり全部のことです。

.box{background-color : skyblue ; }を総称してrulesetといいます。 今回の例でいうと、.box{background-color : skyblue ; }というrulesetは「【背景色をスカイブルー色にする】という設定をboxクラスに適用します」という意味になります。

まとめ

ちょっと本題から逸れてしまいましたが、結論として「Do not use empty rulesets」が出てきたらどうすればいいかというと、無視してどんどん書き進めていきましょう。

書き進めていって最終的に宣言ブロックが空でなくなったときにこのエラーは解決されます。

以上!