-
Notifications
You must be signed in to change notification settings - Fork 779
Description
In CSS, if the value of a property is invalid, the previously valid value in the cascade is used instead.
For example:

the background will be red
However, there is is no valid-path to this built-in fallback behavior, it only happens in error. Since CSS Variable references are valid values, there is no way to fallback to the previous valid value if the referenced value is a guaranteed invalid value (initial).
For example:

the background will be the default value, none ... because it's invalid at run time.
Proposal:
Provide another CSS-Wide Keyword, ignore (or skip, maybe) that will emulate the built in invalid-value fallback. This would do nothing at all on it's own if you wrote background: ignore; but it becomes quite useful as a value to use with --CSS-variables.
Scenario:
There is a 3rd party component with its own default styles but wants to provide CSS Variables that override them.
The DOM inside the component may be varied based on options, or otherwise complex, and may also change over time with new releases.
These --component-vars prevent the consumer from needing to inspect and write unstable selectors targeting that DOM in order to make a change.
Alternatively, they may provide a component with equally complex/varied DOM that is unstyled by default but has CSS Variables to make it easier for the user to consume:

Problem:
Both of these are much better than writing selectors that may need to change or miss some use case, but now the user has to supply the --component-variables. And more complicated, they have to supply a value that fits the theme of their site, which may change based on a selected theme, lightmode/darkmode, or depend on the context where the component is consumed.
This adds a lot of complexity back onto the plate of the consumer. The consumer can't, for example, just rely on the site's already written global value for a button's background.
Solution:
It can be made much easier with an ignore keyword.
In the first case, where the component is pre-styled but allows overrides, their CSS could be:

Which would allow the consumer to provide a value of ignore or initial to the variable(s) and their site's existing style would style it as they expect within the theme/context/etc.
In the case where the component is not styled by default, the CSS could be:

in which case the consumer doesn't have to do anything at all for the variables and it will just use the site's existing styles, but could very easily override it if necessary.
Spec links:
CSS-Wide Keywords
revert keyword // this is similar but rolls back the cascade at a higher level
