CSS irgendwie zuweisen/übernehmen/vererben

[Gunnar Bittersmann]

@@dedlfix

Wieso "Nö"? Hast du nicht genau das bestätigt, was ich schrieb?

Mag sein. Dann hatte ich dich falsch verstanden, was du mit „Custom Properties […] sind Werte für eine einzelne CSS-Eigenschaft“ meintest.

Ich möchte gern CSS so schreiben, dass es DRY ist und nicht mit Copy & Paste hantieren, wenn ich dasselbe Bündel an Eigenschaften an mehreren Stellen brauche. Vermutlich ist die Lösung dazu, die gemeinsamen Teile der verschiedenen Stellen so zusammenzufassen, dass es nur noch eine, dafür aber eine neue ist. Also quasi ein Bereich für kleine Viewports, einen für mittlere, einen für große und einen weiteren für die Gemeinsamkeiten von kleinen und mittleren, die beim großen nicht gesetzt werden sollen.

Beispiel: Schriftgrößen

body { font-size: var(--font-size-medium) }
h1 { font-size: var(--font-size-x-large) }
h2 { font-size: var(--font-size-large) }
blockquote { font-size: var(--font-size-large) }
blockquote footer { font-size: var(--font-size-medium) }

:root
{
	--font-size-medium: 1rem;
	--font-size-large: 1.4rem;
	--font-size-x-large: 2rem;
}

@media (min-width: 30em)
{
	:root
	{
		--font-size-medium: 1.1rem;
		--font-size-large: 1.7rem;
		--font-size-x-large: 3rem;
	}
}

Mit Media-Query müssen nun nicht die Werte der font-size-Eigenschaft für alle einzelnen Elemente geändert werden, sondern nur an einer Stelle die Werte der custom properties.

Und an der Stelle wird auch deutlich, warum es custom properties sind und keine „CSS-Variablen“.

LLAP 🖖