VS codeで出てきた謎エラー「Do not use empty rulesets」
これは一体なんなの？
マークアップ言語勉強中の私が超初心者目線で解説します。
宣言ブロックが空の時に出現
cssを書いていこうとした矢先に謎のエラーが出現。
「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」が出てきたらどうすればいいかというと、無視してどんどん書き進めていきましょう。
書き進めていって最終的に宣言ブロックが空でなくなったときにこのエラーは解決されます。
以上！
