Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

Hi Lea,

I wanted to put my thoughts on "inherit" here since I really like the spec, and I would love to see if it helps some of you figure this one out. I'm new to WD's but I'm not new to naming things and CSS, and I hope I can be of "perceptual assistance".

_Q: what is a parent?_ 
I currently inclined to ask what does parent relate to when you say 'parent(--secondary-color)': does it mean that secondary is now set as the parent, or that --primary-color now has a parent assigned to it?

I believe that if you're going to make such a semantical and salient word intuitive to use, there must be a way to remember that pattern quite simple. I can "see" how parent works, but then again it's quite similar to inherit the way I see it; it's a **sister-set** that you can also do with custom properties, and what @getify was saying;  

> Here's my use-case:
> 
> I regularly will set a CSS variable in a parent element, then use that value for some dimension (like width). Then, in a child element, I'll use that same CSS variable and perform a `calc(..)` on it to derive a new value for the child element to use for some other dimension (like padding or border width). In this case, I'm only using the CSS variable because of its ability to be inherited down to the child and re-used.
> 
> It would be much nicer if, in those cases, I could skip the CSS variable altogether, and just have the child element reference a parent CSS property value, like for example: `border-width: calc(parent(width) / 10)`.

Since this to me is more about a functional thing of layering, NOT naming imo, I would superficially divide them into four layers, like the cascade, and make each layer have one form, function & fiction: **PICA**

**P**arent(color, width, etc..)  Chain something at a _global_ level
**I**nherit(color, width, etc..)  Reference something at a _local_ level
**C**urrent(color, width, etc..)  Chain something at the _:root_ level
**A**lias(color, width, etc..)  Instantiate something at a _any_ level without touching other references

I think that the current inherit() function is the kind of grouping that can get quite hairy perceptually, since what used to be done by yourself using css-vars, can then be done with native tools, but they don't explain cause and correllation. I think it would be far more accessible if you knew exactly which one did what, and why you need to use it where, before you need to leave your editor and go fish the docs.

In that respect, current* would work for me to substitute inherit() entirely;

currentBackground
currentWidth
currentParent
currentColor
currentBorderColor
currentAccentColor

That's something that I can use out of the box without the need for a manual with a (wait for it...) parenting tone 😉




-- 
GitHub Notification of comment by alolalo
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-905788839 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 August 2021 18:52:23 UTC