Context :

Currently there is no way to reuse small groups of declarations (keys and values) in multiple styles without creating a style rule for them.

.want-to-reuse { color: hotpink; padding: 15px; display: flex; }

To apply this to multiple components you need to alter your markup.
Or you need to copy/paste the declarations to each style rule.

Mixins are often used to work around this.
I know mixins will never be a thing in native CSS and maybe the same reasons behind that apply to this proposal.

@mixin some-mixin { color: hotpink; padding: 15px; display: flex; } selector { @include some-mixin; }

Custom properties also help to some extend because they allow values to be re-used.
Naming conventions help to group sets of values.

:root { --some-color: purple; --some-padding: 20px; --some-display: flex; --fancy-color: hotpink; --fancy-padding: 15px; --fancy-display: flex; }

Proposal :

Can custom shorthands be defined through @property?

• syntax must match the declared constituent properties
• keywords like initial work exactly like they work for native shorthands

I included padding in the example but maybe shorthand in shorthands have issues?

@property --some-shorthand { syntax: "<color>" "<length>" "<ident>"; constituent-properties: color padding display; values:	default / purple 20px flex,	fancy / hotpink 15px flex; } .foo { --some-shorthand: fancy; }

Is equivalent to :

.foo { color: hotpink; padding: 15px; display: flex; }

Set values of constituent properties :

.foo { --some-shorthand: green 10px block; }

This is somewhat related to #7273 as it allows similar patterns when styling elements.