Composite properties.

[korenevskiy]

In CSS, we often use layered properties. Example:

box-shadow: 0 0 10px black, 0 0 20px white;
text-shadow: 0 0 10px black, 0 0 20px white;
background: url(cat.png), url(dog.png), linear-gradient(to bottom, red 0%, blue 100%);
transition: opacity 0.5s, height 1s, background-color 2s;

I propose composite properties. We are adding a plus sign "+". Example:

box-shadow: 0 0 10px black;
box-shadow+: 0 0 20px white;

text-shadow: 0 0 10px black;
text-shadow+: 0 0 20px white;

background: url(cat.png); 
background+: url(dog.png);
background+: linear-gradient(to bottom, red 0%, blue 100%);

transition: opacity 0.5s;
transition+: height 1s;
transition+: background-color 2s;

This will allow you to structure styles by meaning.

button{
/* Transition Width */
	width: 50px;
	transition: width 0.5s;
/* Transition box-shadow */
	box-shadow: 0 0 10px black;
	transition+: box-shadow 0.5s;
/* Transition background-color */
	background-color: red; 
	transition+: background-color 1s;
}

You can consider the syntax with a plus sign "+" at the very end .

button{
	transition: width 0.5s;
	transition: box-shadow 0.5s +;
	transition: background-color 1s +;
}

Optionally, you can consider specifying the order of the member after the plus sign "+"

button{
	transition: width 0.5s;
	transition: background-color 1s +2;
	transition: box-shadow 0.5s +1;
}

This is the equivalent of

button{
	transition: width 0.5s, box-shadow 0.5s, background-color 1s;
}

[dbaron]

This idea (often called "additive cascade"; you could search www-style archives for that term) has been discussed before, in places such as:
https://lists.w3.org/Archives/Public/www-style/1999Oct/0025.html
https://lists.w3.org/Archives/Public/www-style/2012Apr/thread.html#msg231
#1594

I think this is probably a duplicate of #1594, although there's a recent comment from @tabatkins suggesting otherwise.

[dbaron]

Closing as duplicate of #1594.