Skip to main content

display-notation

Specify short or full notation for the display property.

a { display: block; }
/**          ↑
 *           This notation */

Use this rule to enforce a convention. The display property accepts a multi-keyword syntax that names the outer and inner display types separately, e.g. inline flex. Each single keyword maps to such a pair, e.g. inline-flex to inline flex and block to block flow.

Choose:

  • "full" to compose values from their outer and inner display types, which makes it easier to understand how an element will behave
  • "short" for brevity and older browsers, which accept only the single-keyword syntax

This rule ignores $sass, @less, and var(--custom-property) variable syntaxes.

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

This rule supports 2 message arguments: the display value and its expected notation.

Options​

"full"​

Applicable display values must always use the full notation.

{
  "display-notation": "full"
}

The following patterns are considered problems:

a { display: block; }
a { display: grid; }
a { display: list-item; }

The following patterns are not considered problems:

a { display: block flow; }
a { display: block grid; }
a { display: block flow list-item; }

"short"​

Applicable display values must always use the short notation.

{
  "display-notation": "short"
}

The following patterns are considered problems:

a { display: block flow; }
a { display: block grid; }
a { display: block flow list-item; }

The following patterns are not considered problems:

a { display: block; }
a { display: grid; }
a { display: list-item; }