[csswg-drafts] [meta] `…-name` variants and `<custom-ident>` vs. `<dashed-ident>` (#13389)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [meta] `…-name` variants and `<custom-ident>` vs. `<dashed-ident>` ==
This is mostly an informative issue, although there are some minor suggestions for improvement at the end. 
My initial comment is probably missing some cases.
According to the current, not quite up-to-date state of the [indexes](https://drafts.csswg.org/indexes/), there are almost a dozen properties ending in `-name` and over twice as many grammar productions:

| Module  | Property / Production | Value | `none`? | Type | Number |
| --------- | ---- | ---- | ---- | ---- | ---- |
| css-conditional-5      | [`<supports-condition-name>`](https://drafts.csswg.org/css-conditional-5/#supports-condition-rule)    | `<extension-name>`               | ❌ | other  | 1 |
| css-extensions-1       | [`<extension-name>`](https://drafts.csswg.org/css-extensions-1/#extension-name)                       | `<dashed-ident>`                 | ❌ | dashed | 1 |
| css-anchor-position-1  | [`<anchor-name>`](https://drafts.csswg.org/css-anchor-position-1/#valdef-position-anchor-anchor-name) | `<dashed-ident>`                 | ❌ | dashed | 1 |
| css-navigation-1       | [`<route-name>`](https://drafts.csswg.org/css-navigation-1/#typedef-route-name)                       | `<dashed-ident>`                 | ❌ | dashed | 1 |
| css-variables-2        | [`<custom-property-name>`](https://drafts.csswg.org/css-variables-2/#defining-variables)              | `<dashed-ident>` except `--`     | ❌ | dashed | 1 |
| css-conditional-5      | [`<style-feature-name>`](https://drafts.csswg.org/css-conditional-5/#style-container) | `<custom-property-name>` \| "supported CSS property" | ❌ | other | 1 |
| css-animations-2       | [`timeline-trigger-name`](https://drafts.csswg.org/css-animations-2/#timeline-trigger-name)           | `none \| <dashed-ident>#`        | ✅ | dashed | 1+ |
| css-animations-2       | [`event-trigger-name`](https://drafts.csswg.org/css-animations-2/#event-trigger-name)                 | `none \| <dashed-ident>#`        | ✅ | dashed | 1+ |
| scroll-animations-1    | [`scroll-timeline-name`](https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name)          | `[ none \| <dashed-ident> ]#`    | ✅ | dashed | 1+ |
| scroll-animations-1    | [`view-timeline-name`](https://drafts.csswg.org/scroll-animations-1/#view-timeline-name)              | `[ none \| <dashed-ident> ]#`    | ✅ | dashed | 1+ |
| pointer-animations-1   | [`pointer-timeline-name`](https://drafts.csswg.org/pointer-animations-1/#pointer-timeline-name)       | `[ none \| <dashed-ident> ]#`    | ✅ | dashed | 1+ |
| css-animations-1       | [`animation-name`](https://drafts.csswg.org/css-animations-1/#animation-name)                         | `[ none \| <keyframes-name> ]#`  | ✅ | other  | 1+ |
| css-animations-1       | [`<keyframes-name>`](https://drafts.csswg.org/css-animations-1/#keyframes)                            | `<custom-ident> \| <string>`     | ❌ | custom or string | 1 |
| scroll-animations-1    | [`<timeline-range-name>`](https://drafts.csswg.org/scroll-animations-1/#named-ranges)                 | `<ident>`                        | ❌ | ident  | 1 |
| css-fonts-4            | [`<feature-value-name>`](https://drafts.csswg.org/css-fonts-4/#font-variant-alternates-prop)          | `<ident>`                        | ❌ | ident  | 1 |
| css-cascade-5          | [`<layer-name>`](https://drafts.csswg.org/css-cascade-5/#layer-names)                                 | `<ident> [ '.' <ident> ]*`       | ❌ | ident  | 1+ |
| css-view-transitions-2 | [`view-transition-name`](https://drafts.csswg.org/css-view-transitions-2/#view-transition-name-prop)  | `none \| <custom-ident>`         | ✅ | custom | 1 |
| css-conditional-5      | [`container-name`](https://drafts.csswg.org/css-conditional-5/#container-name)                        | `none \| <custom-ident>+`        | ✅ | custom | 1+ |
| css-contain-3          | [`container-name`](https://www.w3.org/TR/css-contain-3/#container-name)                               | `none \| <custom-ident>+`        | ✅ | custom | 1+ |
| css-conditional-5      | [`<container-name>`](https://drafts.csswg.org/css-conditional-5/#container-rule)                      | `<custom-ident>`                 | ❌ | custom | 1 |
| css-lists-3            | [`<counter-name>`](https://drafts.csswg.org/css-lists-3/#auto-numbering)                              | `<custom-ident>`                 | ❌ | custom | 1 |
| css-counter-styles-3   | [`<counter-style-name>`](https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule)       | `<custom-ident>`                 | ❌ | custom | 1 |
| css-grid-2             | [`<line-names>`](https://drafts.csswg.org/css-grid-2/#typedef-line-names)                             | `'[' <custom-ident>* ']'`        | ❌ | custom | 0+ |
| css-fonts-4            | [`<family-name>`](https://drafts.csswg.org/css-fonts-4/#family-name-syntax)                           | `<string> \| <custom-ident>+`    | ❌ | custom or string | 1+ |
| css-speech-1           | [`<voice-family-name>`](https://drafts.csswg.org/css-speech-1/#voice-props-voice-family)              | `<string> \| <ident>+`           | ❌ | ident or string  | 1+ |
| css-ui-4               | [`<target-name>`](https://drafts.csswg.org/css-ui-4/#typedef-target-name)                             | `<string>` not starting with `_` | ❌ | string | 1 |
| css-highlight-api-1    | [`<custom-highlight-name>`](https://www.w3.org/TR/css-highlight-api-1/#custom-highlight-pseudo)       | `<ident-token>`                  | ❌ | token  | 1 |
| css-values-5           | [`<attr-name>`](https://drafts.csswg.org/css-values-5/#typedef-attr-name)                             | `[ <ident-token>? '\|' ]? <ident-token>` | ❌ | token | 1–2 |
| css-grid-2             | [`<line-name-list>`](https://drafts.csswg.org/css-grid-2/#typedef-line-name-list)                     | `[ <line-names> \| <name-repeat> ]+` | ❌ | other  | 1+ |
| css-lists-3            | [`<reversed-counter-name>`](https://drafts.csswg.org/css-lists-3/#typedef-reversed-counter-name)      | `reversed( <counter-name> )`     | ❌ | other  | 1 |
| css-navigation-1       | [`<init-descriptor-name>`](https://drafts.csswg.org/css-navigation-1/#typedef-init-descriptor-name)   | `protocol \| hostname \| port \| pathname \| search \| hash \| base-url` | ❌ | keyword | 1 |
| css-values-5           | [`<syntax-type-name>`](https://drafts.csswg.org/css-values-5/#css-syntax)                             | `angle \| color \| custom-ident \| image \| integer \| length \| length-percentage \| number \| percentage \| resolution \| string \| time \| url \| transform-function` | ❌ | keyword | 1 |
| css-fonts-4            | [`<system-family-name>`](https://drafts.csswg.org/css-fonts-4/#system-family-name-value)              | `caption \| icon \| menu \| message-box \| small-caption \| status-bar ` | ❌ | keyword | 1 |

* [`<dashed-ident>: '--'<custom-ident>`](https://drafts.csswg.org/css-values/#dashed-idents)
* [`<custom-ident>: <ident>`](https://drafts.csswg.org/css-values/#custom-idents) except `initial`, `inherit`, `unset`, `default` and any keyword
* [`<ident>: <ident-token>+`](https://drafts.csswg.org/css-values/#css-css-identifier)
* [`<ident-token>`](https://drafts.csswg.org/css-syntax-3/#ident-token-diagram) <!--: /(--|-?([a-zA-Z]|[:non-ascii:]|[:escape:]))([a-zA-Z0-9_-]|[:non-ascii:]|[:escape:])*/-->
* [`<string>: <string-token>`](https://drafts.csswg.org/css-values-4/#strings)
* [`<string-token>`](https://drafts.csswg.org/css-syntax-3/#string-token-diagram) <!--: /("([^"\n]|[:escape:]|\\\n)*")|('([^'\n]|[:escape:]|\\\n)*')/ -->

If I understand the note for `<ident>` correctly, `<feature-value-name>`and `<layer-name>` should perhaps use `<custom-ident>` instead; for `<timeline-range-name>`, I chose `<ident>` instead of `<custom-ident>` judging from the relevant prose. The [ED of css-highlight-api-1](https://drafts.csswg.org/css-highlight-api-1/#registration) differs from the WD regarding the argument of `::highlight()`.

I probably should not have included `<line-name-list>` above.

A point could be made for some unified productions:

* `<trigger-name>: none | <dashed-ident>#` for `timeline-trigger-name` and `event-trigger-name`
* `<timeline-name>: [ none | <dashed-ident> ]#` for `scroll-timeline-name`, `view-timeline-name`and `pointer-timeline-name`
* `<family-name>` for `font-family` and `voice-family`, but that would have legacy issues

Just from comparison with the rest, `<target-name>` looks like it needs some fixing.

It would be nice if `-name` was reserved for (at least partially) author-defined idents, so the ones with predefined keywords only, i.e. `<init-descriptor-name>`, `<syntax-type-name>` and `<system-family-name>`, or a surrounding function, i.e. `<reversed-counter-name>`, should use different … names.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13389 using your GitHub account


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

Received on Friday, 23 January 2026 16:56:59 UTC