Skip to main content

length-zero-no-unit

Disallow units for zero lengths.

a { top: 0px; }
/**      ↑↑
 * This zero and this type of length unit */

Lengths refer to distance measurements. A length is a dimension, which is a number immediately followed by a unit identifier. However, for zero lengths the unit identifier is optional. The length units are: em, ex, ch, vw, vh, cm, mm, in, pt, pc, px, rem, vmin, and vmax.

This rule ignores lengths within math functions (e.g. calc).

The fix option can automatically fix all of the problems reported by this rule.

This rule doesn't have any message arguments.

Options​

true​

{
  "length-zero-no-unit": true
}

The following patterns are considered problems:

a { top: 0px }
a { top: 0.000em }

The following patterns are not considered problems:

a { top: 0 } /* no unit */
a { transition-delay: 0s; } /* dimension */
a { top: 2in; }
a { top: 1.001vh }

Optional secondary options​

ignore​

{ "ignore": ["array", "of", "options"] }

"custom-properties"​

Ignore units for zero lengths in custom properties.

{
  "length-zero-no-unit": [true, { "ignore": ["custom-properties"] }]
}

The following pattern is not considered a problem:

a { --x: 0px; }

ignoreFunctions​

{ "ignoreFunctions": ["array", "of", "functions", "/regex/"] }

Ignore units for zero lengths within the specified functions.

Given:

{
  "length-zero-no-unit": [true, { "ignoreFunctions": ["var", "/^--/"] }]
}

The following patterns are not considered problems:

a { top: var(--foo, 0px); }
a { top: --bar(0px); }

ignorePreludeOfAtRules​

{
  "ignorePreludeOfAtRules": ["array", "of", "at-rules", "/regex/"]
}

Ignore units for zero lengths within the preludes of the specified at-rules.

Given:

{
  "length-zero-no-unit": [
    true,
    { "ignorePreludeOfAtRules": ["media", "/^--bar/"] }
  ]
}

The following patterns are not considered problems:

@media (height > 0px) {}
@--bar-baz 0px;