[css-cascade] non-destructive shorthands

[jonathantneal]

In Cascading and Inheritance: Shorthand Properties, we learn that shorthands allow authors to specify the values of several properties with a single property. This is very useful for a few reasons, but I find it most useful because it keep thoughts grouped together. This advantage has a profound catch; omitted values in shorthands are assigned their initial value.

So, to remain non-destructive looks something like this:

.non-destructive-block-margin {
  margin-top: 10px;
  margin-bottom: 30px;
}

.non-destructive-inline-margin {
  margin-left: auto;
  margin-right: auto;
}

.non-destructive-margin-variation {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

With these separated properties, the “margin” thought is no longer grouped together. So, is there a way we could make non-destructive shorthands? I have 2 suggestions.

Solution 1: Skip tokens

As proposed in #733, a skip token would allow authors to prevent the resetting of specific values in shorthands.

.non-destructive-block-margin {
  margin: 30px *;
}

.non-destructive-inline-margin {
  margin: * auto;
}

In order for this to actually work, these skip tokens would be limited to ordered shorthands. However, there may be another way around that:

Suggestion 2: Identifiers

In Grid Layout Module: Named Grid Lines, we learn about named lines which allows authors to easily identify the grid lines being styled. Identifiers could be used by shorthands to limit the reach of overrides.

.non-destructive-block-margin {
  margin: [block] 10px 30px;
}

.non-destructive-inline-margin {
  margin: [inline] auto;
}

.non-destructive-margin-variation {
  margin: [block-start] 0 [inline] auto;
}

An advantage of this syntax is that it would not be limited to order shorthands.

[tabatkins]

Something like the latter has been suggested before, by @FremyCompany and others, but with a more unambiguous syntax:

margin: {block-start: 0; inline: auto;};

Property nesting!

[jonathantneal]

Thanks for looking into this, @tabatkins! Property nesting sounds great, too!

I did a search for property nesting and could not find an issue in this repository for that. What was the initial response or consensus in those previous exchanges?

[tabatkins]

It's just been suggested; no particular effort has been made to get it into a spec.

[FremyCompany]

As far as I can remember, this is indeed a syntax we had discussed at some point, though as a way to create shorthands for custom properties.

--custom-layout: {
   sizing: basic-mode,
   placement: auto;
}

that would be equivalent of something like

--custom-layout\\sizing: basic-mode;
--custom-layout\\placement: auto;

but would also reset to initial a property like --custom-layout\\direction if one was defined on the element.

I wonder though, if the goal here is not to reset all the sub-properties, why not using a property like margin-inline directly if that is the specific property you want to set and not the entire margin? margin-inline: .... seems shorter to write than margin: { inline: ... }.

Though, of course, we don't have a margin-inline property as far as I know. That seems like a different problem though, isn't it? I guess if that is something you find valuable, you can create one by doing:

* { --margin-inline: 0; --margin-block: 0; margin: var(--margin-block) var(margin-inline); }

Then you can set --margin-inline anywhere if that is what you want, and if you want to really set the entire margin, then you can use margin. Does that make sense?