The cascading nature of CSS is both a blessing and a curse. In many cases, it results in declarations that were meant to be applied together being applied partially, resulting in visual chaos, poor accessibility, or both.

In some ways, that is why @supports was invented: for cases where the poorly supported feature needed to be applied together with some well supported features. However, this is not just about browser support.

Consider cases where the background color is overridden but not the text color, or the font size but not the line height, or even things not directly related, such as the gap for a button group, but not the border-radius.

It seems to me it would help solve a host of use cases if authors could mark groups of declarations (and possibly even nested rules) as "atomic" (in the same sense as db transactions): if even a single declaration in the group is not applied (either because it was overridden or because something was not supported), then the entire group is no longer applied.

E.g.

button-group {
	@atomic {
		gap: 0;
		
		> button {
			border-radius: .3em;

			&:first-child {
				border-inline-start-radius: 0;
			}

			&:last-child {
				border-inline-end-radius: 0;
			}
		}
	}
}

Note that here I’m even setting the gap to its initial value, just to opt it in to the atomic-ness.

This would also simplify many @supports use cases:

h1 {
	color: var(--color-primary);

	@atomic {
		background: linear-gradient(...);
		background-clip: text;
		color: transparent;	
	}
}

instead of the current:

h1 {
	color: var(--color-primary);

	@supports (background-clip: text) {
		background: linear-gradient(...);
		background-clip: text;
		color: transparent;	
	}
}

My main worry is circularities: I can't yet see any, but I have an annoying niggling feeling that they may exist. Or strictly defining the concept of a property being overridden.