“Do not use empty rulesets”というVisual Studio Codeのエラーの意味

目次
PR 開発・制作現場の導入実績No.1ツール

プロジェクトを成功させるには、適切なツール選びが重要です。タスク管理・Wiki・バージョン管理がこれ一つで完結する「Backlog」は、私が最も信頼しているプロジェクト管理ツールです。

CSSをコーディングしている時に不意にでたエラー

Visual Studio CodeでCSSをコーディングしていると、突然参考画像のように“Do not use empty rulesets”というエラーが表示されました。
これはいったいどのような意味を持っているのでしょうか?
実はこのエラー、内容は非常に単純で、「何のプロパティの設定もしていない、セレクタだけを指定したCSSを書かないでください」というメッセージです。

Do not use empty rulesetsというエラーメッセージのキャプチャー画像
参考画像

参考画像であれば、601行目から#idに対して、CSSを書こうと{}を付けているのですが、中身はまだ記述していません。
このように、セレクタだけを書いている場合は、”Do not use empty rulesets”というエラーメッセージがVisual Studio Codeに表示されるようです。

時にはセレクタだけを記述することもある

この”Do not use empty rulesets”というエラーメッセージは、セレクタだけ書いておいて、プロパティを書くのを忘れていたという時に助かる通知ではあります。
しかし、先にセレクタだけを書いておきたいというコーダーさんは、エラーをいくつも出されてしまい、少しうんざりしてしまうかもしれません。
また、ごくまれにセレクタだけを記述し、ブラウザのバグを無理やり直すということもあるようです[1] javascript – Safari bug :first-child doesn’t update display:block when items are removed with JS – Stack Overflow
このバグについては特殊なケースなので説明が難しいですが、ブラウザが正しくタグを認識しない場合、CSSでセレクタだけを指定し、中身を空にするだけでタグを認識するようになることもあるようです。
ただし、こうしたケースはまれだと思われるので、CSSのコーディングが終わったら、基本的にはセレクタだけの部分は消しておいたほうがよいでしょう。

参考

PRプロジェクト管理、まだExcelで消耗していませんか?

複雑なタスク管理やガントチャート作成も、「Backlog」なら直感的に一元管理できます。エンジニアから営業職まで誰でも使いやすい、Web制作・開発現場の必須ツールです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次