This is also the case for properties like font
. As in:
font: 12px/18px;
which is a shorthand property for font-size
and line-height
properties.
The background
shorthand property does the same:
background: no-repeat center / 80% url("../img/image.png");
In the case of background
, to define the background-size
you must define the background-position
, followed by a /
, and then the background-size
value.
grid-columns
is a shorthand property for grid-column-start
and grid-column-end
properties. And both these values can contain one or more spaces. Like span 2
, or 5 somegridarea span
if using a custom identifier.
IMO, the /
makes it more readable, and less prone to error. It also eliminates ambiguity with values that contain spaces.
For example:
grid-column: 1 / span 2;
or
grid-column: span 3 / 7;
span 2
. In this case the full property would begrid-column: 1 / span 2;
.