noEmptyBlock

CSS

Summary

• Rule available since: v1.8.0
• Diagnostic Category: lint/suspicious/noEmptyBlock
• This rule is recommended, which means is enabled by default.
• This rule doesn’t have a fix.
• The default severity of this rule is warning.
• Sources:
  • Same as stylelint/block-no-empty

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noEmptyBlock": "error"
      }
    }
  }
}

Description

Disallow CSS empty blocks.

By default, it will allow empty blocks with comments inside.

Examples

Invalid

p {}

code-block.css:1:3 lint/suspicious/noEmptyBlock ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ An empty block isn’t allowed.
  
  > 1 │ p {}
      │   ^^
    2 │ 
  
  ℹ Consider removing the empty block or adding styles inside it.
  

.b {}

code-block.css:1:4 lint/suspicious/noEmptyBlock ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ An empty block isn’t allowed.
  
  > 1 │ .b {}
      │    ^^
    2 │ 
  
  ℹ Consider removing the empty block or adding styles inside it.
  

@media print { a {} }

code-block.css:1:18 lint/suspicious/noEmptyBlock ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ An empty block isn’t allowed.
  
  > 1 │ @media print { a {} }
      │                  ^^
    2 │ 
  
  ℹ Consider removing the empty block or adding styles inside it.
  

Valid

p {
  color: red;
}

p { /* foo */ }

@media print { a { color: pink; } }

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases