Re: [csswg-drafts] [css-properties-values-api] Shorthand for custom property declaration (#7523)

# Comma-separated list of names

@andruud:

> Proposed async resolution: `Allow a comma-separated list of custom property names in the @property prelude`

As several others before, I totally agree that this is a simple and uncontroversial quick win.

# Using custom at-rule names

@korenevskiy 

> ```css
> @--header-color: color white noinherit;
> ```

@Crissov:

> ```css
> @length --finger-tip: 8mm;
> ```

As noted earlier, I am strongly for reusing `@property`. The syntax with `@` and `<dashed-ident>` is possibly reserved for custom at-rules. And introducing different at-rules for different values quickly gets out of hand and conflicts with other definitions, as @LeaVerou already indicated.

# Dashes in keywords

@korenevskiy:

> ```css
> @--header-color: color white noinherit;
> ```

@Loirooriol meant in [his comment](https://github.com/w3c/csswg-drafts/issues/7523#issuecomment-1967417226) that CSS generally uses dashes to separate words in a keyword. `nowrap`, `currentcolor` and the other multi-word color names _not_ using dashes to separate the words are considered historical mistakes.

# Overwriting at-rules

@LeaVerou @yisibl

> Can it be override then?
> 
> ```css
> @property --text-color, --bg-color {
>   inherits: true;
>   initial-value: currentColor;
>   syntax: "<color>";
> }
> @property --bg-color {
>   initial-value: transparent; /* Override the above definition. */
> }
> ```

As pointed out by @Loirooriol and @andruud, currently, at-rules follow the definition "last one wins". Allowing to merge and overwrite them would be a new thing. And as noted in https://github.com/w3c/css-houdini-drafts/issues/1162#issuecomment-3611670179, that should be discussed separately.

# Custom properties as descriptors

@tabatkins @andruud:

> ```css
> @properties {
>   syntax: "<color>";
>   inherits: false;
>   --brand-color: teal;
>   --text-color: black;
>   --bg-color: white;
>   /* more names and initial values here */
> }
> ```

I am ambivalent about that proposal. It is dense and authors can define multiple properties quickly. Though from reading it's not immediately clear what the custom properties mean and that their value is meant to be their initial value.

# Defining them via prefixes and suffixes

@Crissov:

> ```css
> @property --color- {
>   syntax: <color>;
>   initial-value: currentcolor;
>   inherits: prefix;
> }
> @property -color {
>   syntax: <color>;
>   initial-value: currentcolor;
>   inherits: suffix;
> }
> :root {
> --color-green: lime; /* registered */
> --brand-color: olive; /* registered */
> --theme-color-red: maroon; /* unregistered */
> }
> ```

The idea behind this is good, as it allows to automatically define custom properties. Though the proposed syntax is very confusing, as @LeaVerou [pointed out earlier](https://github.com/w3c/csswg-drafts/issues/7523#issuecomment-3621281390).

# Nesting to overwrite/extend

@LeaVerou:

> ```css
> @property --width, --height, --depth {
>  syntax: "<length>";
>  inherits: false;
>  initial-value: 2147483647px;
> 
>  @property --depth { /* overrides */ 
>   initial-value: 0px;
>  }
> }
> ```

I do like this proposal. It makes it relatively clear that descriptors are shared and overwritten in nested rules.

# Using keyword to re-use definition

> ```css
> @property --length {
>   syntax: "<length>";
>   inherits: false;
>   initial-value: 2147483647px;
> }
> 
> @property --width from --length;
> @property --height from --length;
> 
> @property --depth from --length {
>   initial-value: 0px;
> }
> ```

It looks fine to me and it similarily understandable as the nested proposal. Though it is also somewhat more verbose and encourages authors to define custom properties that are only used to predefine other properties.

Sebastian

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


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

Received on Thursday, 11 December 2025 22:01:17 UTC