On Inheriting and Sharing Property Values

The Challenge of Dynamic Property Value Sharing

Currently, CSS lacks a function to directly set a property’s value based on another property’s value, even if that value changes. Daniel Schwarz highlights this limitation, noting a proposed, but unimplemented, compute() function that would allow for dynamic inheritance and calculations, potentially simplifying complex designs.

The ideal is a CSS system that dynamically links properties, reducing redundancy and improving maintainability; the reality is workarounds using custom properties or, in limited cases, existing features like aspect-ratio and currentColor. This gap forces developers to choose between verbose custom property declarations and less flexible alternatives, increasing code complexity and potential for errors.

Key Insights

• Custom Properties Limitation: While useful, custom properties require knowing the initial value to declare, hindering true dynamic inheritance.
• inherit() Proposal: A proposed inherit() function (CSS Values and Units Module Level 5) aims to allow inheriting and modifying any parent property value, but faces implementation challenges.
• currentColor Keyword: The currentColor keyword provides a convenient way to reuse the computed value of the color property across other properties, simplifying color scheme management.

Working Example

button {
--button-height: 3rem;
height: var(--button-height);
border-radius: calc(var(--button-height) * 0.3);
}

:root {
--button-height: 3rem;
header {
--header-padding: 1rem;
padding: var(--header-padding);
--header-height: calc(var(--button-height) + (var(--header-padding) * 2));
border-radius: calc(var(--header-height) * 0.3);
button {
height: var(--button-height);
border-radius: calc(var(--button-height) * 0.3);
padding-inline: calc(var(--button-height) * 0.5);
}
}
}

Practical Applications

• Component Libraries: Reusable button components can dynamically adjust border radius based on height, ensuring consistent styling across varying contexts.
• Pitfall: Over-reliance on custom properties can lead to verbose code and reduced readability if not carefully managed; prioritize semantic naming and clear organization.

References:

• https://css-tricks.com/on-inheriting-and-sharing-property-values/