noZeroLengthUnit (CSS)

Language CSS

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/noZeroLengthUnit
This rule has an unsafe fix.
The default severity of this rule is information.
Sources:
- Same as length-zero-no-unit

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noZeroLengthUnit": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow units on zero lengths.

A length of zero is the same distance in every unit, so 0px, 0em, and 0rem all mean the same as 0. CSS allows a zero length to be written without a unit, which is shorter and keeps zero values consistent.

This rule checks length units, such as px, em, rem, vw, and cm. It doesn’t report zeros with other kinds of units, such as 0s, 0deg, 0%, and 0fr, because only lengths can be written without a unit.

The rule also doesn’t report a zero length in the following places, where removing the unit changes the meaning of the value or makes it invalid:

Inside math functions, such as calc(), min(), max(), and clamp().
In the line-height and flex properties, and in the line height of the font property, which is the value after the /. In these places, a 0 without a unit is read as a plain number instead of a length.
In the value of a Sass variable, such as $gap: 0px.

Custom properties

The rule reports zero lengths in custom properties, such as --gap: 0px, but the fix is unsafe there. Removing the unit can break a calc() that uses the custom property: calc(var(--gap) + 1px) is valid when --gap is 0px, and invalid when --gap is 0. For the same reason, the fix is unsafe for values passed to or returned from custom functions, which are functions defined with @function.

The fix is also unsafe in SCSS files, because Sass calculations treat 0px and 0 differently.

Examples

Invalid

1
a {
2
  top: 0px;
3
}

code-block.css:2:9 lint/nursery/noZeroLengthUnit  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The unit px is unnecessary on a zero length.
  
    1 │ a {
  > 2 │   top: 0px;
      │         ^^
    3 │ }
    4 │ 
  
  ℹ A length of zero is the same in every unit, so 0 is enough.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Safe fix: Remove the unit.
  
    1 1 │   a {
    2   │ - ··top:·0px;
      2 │ + ··top:·0;
    3 3 │   }
    4 4 │

1
a {
2
  margin: 0.0em auto;
3
}

code-block.css:2:14 lint/nursery/noZeroLengthUnit  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The unit em is unnecessary on a zero length.
  
    1 │ a {
  > 2 │   margin: 0.0em auto;
      │              ^^
    3 │ }
    4 │ 
  
  ℹ A length of zero is the same in every unit, so 0 is enough.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Safe fix: Remove the unit.
  
    1 1 │   a {
    2   │ - ··margin:·0.0em·auto;
      2 │ + ··margin:·0.0·auto;
    3 3 │   }
    4 4 │

1
@media (min-width: 0px) {}

code-block.css:1:21 lint/nursery/noZeroLengthUnit  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The unit px is unnecessary on a zero length.
  
  > 1 │ @media (min-width: 0px) {}
      │                     ^^
    2 │ 
  
  ℹ A length of zero is the same in every unit, so 0 is enough.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Safe fix: Remove the unit.
  
    1   │ - @media·(min-width:·0px)·{}
      1 │ + @media·(min-width:·0)·{}
    2 2 │

1
a {
2
  --gap: 0px;
3
}

code-block.css:2:11 lint/nursery/noZeroLengthUnit  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The unit px is unnecessary on a zero length.
  
    1 │ a {
  > 2 │   --gap: 0px;
      │           ^^
    3 │ }
    4 │ 
  
  ℹ A length of zero is the same in every unit, so 0 is enough.
  
  ℹ Here, 0 and a zero length aren't always interchangeable. For example, CSS can copy this value into a calc(), where a zero without a unit can't be added to or subtracted from a length. Check how the value is used before removing the unit.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Remove the unit.
  
    1 1 │   a {
    2   │ - ··--gap:·0px;
      2 │ + ··--gap:·0;
    3 3 │   }
    4 4 │

Valid

1
a {
2
  top: 0;
3
  left: 2px;
4
  transition-delay: 0s;
5
  width: calc(0px + 100%);
6
  line-height: 0px;
7
  flex: 1 1 0px;
8
  font: 16px/0px sans-serif;
9
}