Empty CSS Rule
An empty CSS rule is a selector followed by an empty block: '.card { }'. It does nothing but adds bytes to your stylesheet. Empty rules typically come from refactoring (removing all properties but keeping the selector) or from CSS preprocessors generating unused output.
Why It Matters
Empty rules add unnecessary bytes, slow down CSS parsing (the browser still has to process the selector), and clutter your codebase. A few are harmless, but dozens indicate poor CSS hygiene.
Code Examples
.card { }
.header {
/* TODO: add styles */
}
.sidebar { }
.footer {
background: #333;
}/* Removed empty .card, .header, .sidebar rules */
.footer {
background: #333;
}How to Fix
- 1Remove empty rules entirely rather than leaving them as placeholders.
- 2If you need a TODO, use a comment outside the rule, not inside an empty block.
- 3Use PurgeCSS or UnCSS to automatically remove unused CSS from your build.
- 4Configure stylelint with 'block-no-empty' to flag empty rules.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated CSS on reliable hosting.
Related CSS Errors
Duplicate CSS Property
Why duplicate properties in the same rule cause confusion. When it's intentional vs accidental.
Missing Semicolon in CSS
Why missing semicolons break CSS rules and how to find them. The most common CSS syntax error.
Unclosed CSS Bracket
How unclosed curly braces break your entire stylesheet. Find and fix missing closing brackets.